Question

我正在尝试使字符串适合确定的区域（td）而不会破坏线条。问题是：它需要......

调整大小时适合
符合N种决议
在需要时在最后添加...（在不需要时不添加）
接受font-size，font-weight和font-family

根据Novon's question的答案，我制作了以下代码：

CSS （//只是添加一些样式来打破这一行）

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

jQuery （//查找包含.truncated元素的所有td。获取{{1}的真实宽度（通过删除内容并重新添加）如果需要，在td）上应用minWidth

td

结果（如上面代码所预期的）是：

result

但它应该是：

how it should be

我在想，也许会尝试找到字符串的第一个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 + '...'); } });并删除其余部分，但没有找到办法（根据我的口味，这是很多“解决方法”）。有没有更好的方法呢？

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执行此操作，请参阅此链接以供参考：

line clampin

将这些添加到您的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

Answer 4

将文本换行两次以实现此目的：

<style type="text/css">

.relative_wrap {
    height: 1em;
    position: relative;
}

.absolute_wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 0px;
    white-space: nowrap;
}

</style>


<table>
    <tbody>
        <tr>
            <td>
                <div class="relative_wrap">
                    <div class="absolute_wrap">
                            LONG TEXT HERE
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

由于您使用jQuery，因此很容易：

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');

Answer 5

如果您将表格布局设置为固定而td溢出为hidden，那么当div的滚动时，您可以将省略号添加为右浮动td width大于其客户端宽度。

这是CSS，其中包括防止表格渗透的样式：

table {
  table-layout:fixed;
  white-space:nowrap;
  width:500px;
  border-spacing: 0px;
  border-collapse: separate;    
}

td {
  overflow:hidden;
  border:1px solid #ddd;
  padding:0px;
}

.hellip {
  padding-left:0.2em;
  float:right;
  background:white;
  position:relative;
}

jQuery的：

$('td').each(function() {
  if($(this)[0].scrollWidth > $(this).width()) {
    $(this).prepend('<div class="hellip"">&hellip;</div>');
  }
});

演示： http://jsfiddle.net/5h798ojf/3/

根据像素宽度截断字符串

5 个答案: