根据像素宽度截断字符串

Question

我试图让一个字符串适合确定的区域(td)而不会破坏线条.问题是:它需要......

• 调整大小时适合
• 适合N各种分辨率
• ...需要时在最后添加(不需要时不添加)
• 接受的变化font-size,font-weight以及font-family

---

基于对Novon的问题的答案,我做了以下代码:

CSS (//只是添加一些样式来打破这一行)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

jQuery的 (//查找包含所有TD .truncated的元素,再次得到真正的宽度(删除内容并将其添加)td.应用,如果需要的话,minWidth上td)

jQuery('.truncated').closest('td').each(function() {
    var text = jQuery(this).text();
    var widthOriginal = jQuery(this).width();
    var widthEmpty = jQuery(this).text('').width();
    jQuery(this).text(text);
    if(widthOriginal >= widthEmpty){
        var width = (parseInt(widthEmpty) - 10) + 'px';
        jQuery(this).css('maxWidth', width);
        jQuery(this).text(text + '...');
    }
});

结果(如上面代码所预期的)是:

但它应该是:

---

我在想,也许试着找到第一个line字符串并删除其余部分,但没有找到办法做到这一点(这是我的口味的很多"解决方法").有没有更好的方法呢？

Answer 1

使用css text-overflow属性可以轻松实现单行文本截断,所有主流浏览器都支持该属性,包括自版本6以来的IE.

事情是,text-overflow单独做不了多少.它只定义了文本溢出容器时会发生什么.因此,为了查看结果,我们首先需要通过将文本强制转换为单行来使文本溢出.设置overflow容器的属性也很重要:

.truncated {
    display: block;
    white-space: nowrap; /* forces text to single line */
    overflow: hidden;
    text-overflow: ellipsis;
}

jsFiddle示例:https://jsfiddle.net/x95a4913/

文本溢出文档:https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

您可以使用纯CSS执行此操作,请参阅此链接以供参考:

线钳

将这些添加到您的CSS:

.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 1; // amount of line you want
  -webkit-box-orient: vertical;  
}

或者你可以试试clamp.js

https://github.com/josephschmitt/Clamp.js

Answer 3

text-overflow: ellipsis

似乎是纯CSS解决方案 http://www.w3schools.com/cssref/css3_pr_text-overflow.asp