将长文本包装在 div 中答案

【问题标题】：wrap long text in a div将长文本包装在 div 中
【发布时间】：2013-06-11 05:10:53
【问题描述】：

我正在从数据库中查询文本。如果文本结尾太长，我希望能够将文本换行，例如 400 个字符并在末尾显示“...”。怎么办？

【问题讨论】：

请详细说明您如何查询数据库以及您打算如何将结果放入 html 页面。

【解决方案1】：

我建议您不要在查询中这样做。您可能以比例字体呈现，这意味着 400 个字符的大小永远不会相同。 “...”后面有很多空白，有点尴尬。

您可以通过以下方式查询整个字段并使用 CSS（浏览器支持有限）切断：

overflow: hidden;
text-overflow: ellipsis;

【讨论】：

【解决方案2】：

当您在 javascript 字符串中包含文本时：

newText = text.length > 400 ? (text.slice(0, 400) + ' ...'):text;

【讨论】：

【解决方案3】：

在 MySQL 中是：

SELECT (CASE WHEN CHAR_LENGTH(some_column) > 400 THEN CONCAT(SUBSTR(some_column, 1, 400), '...') ELSE some_column END) FROM some_table

填写您自己的要截断的列和表格，但这就是要点。

【讨论】：

【解决方案4】：

您可以将o-text-overflow 添加到 Tomas 的解决方案中以扩展对 Opera 的支持。

【讨论】：

【解决方案5】：

使用 javascript 和 jquery (substring()) 可能适合您的需求。

var mystring = somethingFromYourDb
var mystringToDisplay = mystring.substring(0,400);
var div = document.createElement('div');
div.innerHTML = mystringToDisplay;
...

要显示字符串的结尾，您也有很多方法可以做到这一点。打开一个新窗口，使用jquery函数“toggle()”，...

【讨论】：