HTML单行文本，如果超过一行，则附加“...”？答案

【问题标题】：HTML Single Line Text, appended with "..." if longer than one line?HTML单行文本，如果超过一行，则附加“...”？
【发布时间】：2010-09-08 04:01:42
【问题描述】：

HTML 是否支持通过自动放置“...”来避免多行的文本呈现行为？抱歉，我只是找不到与此行为相关的样式/标签（如果存在）！

【问题讨论】：

标签： html css text

【解决方案1】：

不，没有内置任何东西。

您需要自己在服务器端完成，或者编写一些 JavaScript 来计算行数并将其余行替换为省略号 (...)。

在 CSS3 规范中定义了一个 text-overflow-mode 可以做到这一点，但作为一个工作草案，它不是最终的，不一定适用于当前的浏览器。

【讨论】：

【解决方案2】：

您要查找的属性是 CSS text-overflow: ellipses。不幸的是，它在 Firefox 中不起作用。这里有一个资源：

你可以在 Firefox 中破解它，例如

但唯一真正的跨浏览器解决方案是 JavaScript 解决方案，可能像这样，或者可能是本页 cmets 中的一个：

【讨论】：

【解决方案3】：

简短回答：不。

更长的答案：如果您使用将 HTML 输出到前端的编程后端（例如 PHP），这是可能的。你可以做类似的事情

<?php
    if(str_len($yourText) > 100) {
        echo substr($yourText, 0, 100) . "...";
    }
?>

【讨论】：