如何根据字符串的长度在html表格单元格中划分字符串答案

【问题标题】：How to divide string inside html table cell depending on the length of the string如何根据字符串的长度在html表格单元格中划分字符串
【发布时间】：2016-12-29 20:40:44
【问题描述】：

我有 HTML 表格，其中单元格的内容是使用一些模板引擎放置的。
无论内容大小，我都必须确保单元格的宽度是固定的。

<td align="left" height="50px">
  <a href="#" style="padding-left:5px; display:block; line-height:18px;">
  Traditional Dhow Cruise Dinner in Dubai Creek International Ho...</a>
</td>

案例1： 如果内容很小（已解决）。
那么这个问题可以通过固定单元格的宽度来解决。

案例2： 如果内容很大。
我应该确保所有可以放入单元格内的单词都被填充，然后在最后打印'...'。我尝试计算字符串中的字符，使用模板引擎放置 <...> 在它超过字符数之后。但这似乎不起作用，因为 HTML 会根据单词破坏字符串。因此，有时甚至我的 140 个字符（限制）也超过了单元格的固定高度。我不介意使用任何模板引擎来生成所需的输出。请帮忙。

【问题讨论】：

很明显，您选择的视觉表示不符合它要显示的信息。不治标不治本：改变你的设计。
要求是（正如我在案例 2 中提到的），如果它不符合视觉表示，那么我需要在最后放置三个点（...）。我怎样才能做到这一点？
再一次，这是错误的方法。修复设计，而不是信息。
在锚点试试这个padding-left:5px;display:block;line-height:18px;height:50px;width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
谢谢@Afsar。 text-overflow: ellipsis; 解决了我的问题 :-)

标签： html css template-toolkit

【解决方案1】：

尝试在锚标签中添加text-overflow:Ellipsis；

将锚样式更改为：

padding-left:5px;display:block;line-height:18px;height:50px;‌width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

Info

【讨论】：

【解决方案2】：

将此添加到您的 css 中

td a{
 word-break: break-all;
 width: 150px;
 height: auto;
}

【讨论】：

【解决方案3】：

看看Clamp.js。这个库通过添加省略号来“夹住” HTML 元素内的内容。它适用于所有浏览器。

var module = document.getElementById("html element");

$clamp(module, {clamp: 3}); //Clamp into three rows

或者你可以让它自动夹紧 $clamp(myParagraph, {clamp: 'auto'});或 $clamp(myParagraph, {clamp: '35px'});到给定的高度。

【讨论】：

【解决方案4】：

word-wrap: break-work 是这样做的另一种选择。

td a{ word-wrap: break-work; width: 180px; height: auto; }

word-wrap: break-word 最近改为 overflow-wrap: break-word

将超出的单词换行到下一行。
调整单词，使其不会在中间中断。

word-break: break-all

不考虑连续单词或多个单词，在宽度限制的边缘打破它们。（即使在同一个单词的字符内）

但我认为您需要截断（...）超过 td 单元格长度的单词，因此您可以使用

td { 空白：nowrap； //将所有文本保持在一行溢出：隐藏； //防止文本显示在边框外文本溢出：省略号； //用省略号将超出边框的文本截掉 }

【讨论】：