Question

我正在使用Symfony2，Twig和Twitter Bootstrap。我还没有找到解决以下问题的方法。

在我的网络应用程序的某些部分，我使用相对显示的表格（使用百分比）。

对于那些太长而无法放入“保留”空间的字段值，我使用Twig或Javascript函数来截断字符串，以便它们能够正确匹配。问题是：

有没有办法根据显示的宽度动态设置截断的长度？请注意，由于动态显示表并在窗口大小调整时重置，因此这些宽度将随时改变。

是否可以动态截断字符串？

我正在使用的一些代码：

TWIG：

<td>{{ p.name|truncate(50) }}</td>

JAVASCRIPT：

// Truncates a string and adds "..."
function truncate_string(str, len){
    if (str.length > len)
        return str.substring(0, len) + "...";
    else
        return str;
}

解决方案是根据TD的宽度和要显示的字符串的最终宽度动态设置len参数。

我们通过jQuery，CSS或其他什么来知道字符串的确切宽度根据字体大小和类型？或者，换句话说，我们如何才能知道字符串的最大数量是否能够具有一定宽度（以像素为单位）？

Answer 1

您可以extend twig filter创建自己的过滤器或像这样编辑CSS样式/ HTML

CSS：

table td{
    position:relative;
    overflow:hidden;
}
table td > span{
    display: inline-block;
    position:relative;
    height: 18px;
    min-width: 200px;
}

HTML：

<table>
<tr>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td> 
</tr>
<tr>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td> 
</tr>

因此，您的TD内容会自动调整大小，无需截断文本。

Answer 2

有jQuery plugin可以做你要问的事。使用除javascript之外的任何其他内容都无法实现。也许CSS向导可能能够使用overflow和after属性构建解决方案。根据我的判断，只有在元素中的每个字符串都附加了一个固定的字符串时才会起作用（完整的字符串永远不会显示）。

另请查看与此相关的older SO answer。

字符串截断动态设置

2 个答案: