29

如何将长文本放入固定宽度的列中，而我只有一行文本的空间？文本需要切割成固定宽度（假设为 100 像素），我想在最后添加点“...”。例如这样的事情：

给定字符串：

Some really long string that I need to fit in there!

固定宽度列中的所需输出应为：

Some really long string...
4

5 回答 5

73

您可以单独使用 CSS 执行此操作：

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

注意：您需要检查最新的浏览器支持。

于 2010-01-21T12:12:17.540 回答
2

就像 Gordon 的一些 CSS 一样。刚刚display:block为类似<a>or的内联元素添加了属性<p>：

a#myText{
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

您可以将它与许多浏览器一起使用，就像您在此链接上看到的那样：http: //caniuse.com/#search=text-overflow

于 2014-09-04T10:39:50.820 回答
0

我有一个类似的问题，我解决它的方法是将字符串剥离到 60 个字符并在其末尾附加一个“...”。

一个丑陋的解决方案？是的，但除非有 jQuery 解决方案，否则它可能是您最好的选择。

如果您使用 Smarty，这就是我解决问题的方法：

{$my_string|truncate:60}
于 2010-01-21T11:24:50.587 回答
0

这是我用来截断字符串的函数。像这里的大多数建议一样，它使用 substr 截断字符串，但它会避免拆分字符串中间词：

function truncate_text($string, $min_chars, $append = ' &hellip;') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}
于 2010-01-21T11:46:48.253 回答
0

我认为 N 个字符后的简单剪切文本不是您想要的。这不是一个解决方案，因为以下文本都有 15 个字符长度：iiiiiiiiiiiiiii，mmmmmmmmmmmmmmmmm - 请注意，第二个“单词”大约是第一个单词的三倍。

JavaScript 可能是一个解决方案：

  1. 首先准备你的标记：

    <p id="abc">{TEXT}</p>

    您的文本在哪里{TEXT}被截断为 150 个字符 +...

  2. 现在，当我们为 JavaScript 打下良好基础时，我们可以尝试制作您正在寻找的东西：

    <html>
<head> 
    <style type="text/css">
        #abc {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var ref  = document.getElementById("abc");
            var text = ref.text;

            ref.removeChild(ref.firstChild);
            ref.appendChild(document.createTextNode("..."));

            var maxHeight = ref.offsetHeight;

            var pos = 0;
            while (ref.offsetHeight <= maxHeight) {
                var insert = text.substring(0, ++pos) + "...";

                var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild);
            }

            ref.replaceChild(finalReplace, ref.firstChild);
        }, false);
    </script>
</head>
<body>
    <p id="abc">My very, very, very, very, very, very, very long text...</p>
</body>
</html>
于 2010-01-21T11:48:21.737 回答