1

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

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

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

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

有什么方法可以动态截断字符串？

我正在使用的一些代码：

枝条：

<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;
}

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

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

4

2 回答 2

2

您可以扩展 twig 过滤器以创建自己的过滤器或像这样编辑您的 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 内容会自动调整大小，无需截断文本。

于 2012-11-07T21:08:26.107 回答
1

有一个jQuery 插件可以满足您的要求。除了javascript之外，这将无法实现。也许 CSS 向导可以通过使用overflow和after属性来构建解决方案。根据我的判断，只有在元素中的每个字符串都附加了一个固定字符串时才会起作用（永远不会显示完整的字符串）。

另请查看相关的较旧的 SO 答案。

于 2012-11-07T19:37:17.693 回答