如何使用 CSS 将长文本指示为较小的固定列？

发布于 2024-08-18 06:33:55 字数 255 浏览 3 评论 0原文

如何将长文本放入只有一行文本空间的固定宽度列中？文本需要剪切为固定宽度（比如说100px），我想在末尾添加点“...”。例如这样的事情：

给定字符串：

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

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

Some really long string...

原文

How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px) and I would like to add dots "..." at the end. Something like this for example:

Given string:

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

Desired output in fixed-width-column should be:

Some really long string...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天暗了我发光 2024-08-25 06:33:55

您可以单独使用 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 */
}

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

You can do this with CSS alone:

.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 */
}

Note: You will want to check on the latest browser support.

回复收藏 0 原文

栀子花开つ 2024-08-25 06:33:55

只是用一些CSS，比如戈登的回答。刚刚为或

等内联元素添加了 display:block 属性：

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

您可以在许多浏览器中使用它就像你可以在这个链接上看到的：
http://caniuse.com/#search=text-overflow

Just with some CSS like answer of Gordon. Just added the display:block property for an inline element like <a> or <p> :

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

You could use it with many browser like you can see on this link :
http://caniuse.com/#search=text-overflow

回复收藏 0 原文

山田美奈子 2024-08-25 06:33:55

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

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

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

{$my_string|truncate:60}

I had a similar problem, the way I solved it was to strip the string down to 60 characters and append an '...' to the end of it.

An ugly solution? Yes, but unless there is a jQuery solution it's probably your best bet.

If you're using Smarty, this is how I solved the problem:

{$my_string|truncate:60}

回复收藏 0 原文

多谢你的绝情让我学会死心 2024-08-25 06:33:55

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

function truncate_text($string, $min_chars, $append = ' …') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}

Here's a function I use to truncate strings. Like most of the suggestions here, it uses substr to truncate the string, but it will avoid splitting the string mid-word:

function truncate_text($string, $min_chars, $append = ' …') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}

回复收藏 0 原文

入怼 2024-08-25 06:33:55

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

JavaScript 可能是一个解决方案：

首先准备您的标记：
```
{TEXT}
```
其中 {TEXT} 是截断为 150 个字符的文本 + ...

现在，当我们有了良好的 JavaScript 基础时，我们可以尝试制作您正在寻找的内容：

<代码>
<头> 
    <样式类型=“text/css”>
        #abc {
            宽度：100px；
        }
    
    <脚本类型=“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 位置 = 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);
        }， 错误的）;
    

<正文>
    我的非常非常非常非常非常非常长的文字...

I think simple cutting text after N characters isn't what you're looking for. It's not a solution because the following text have both 15 character length: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - notice that the second "word" is about three times longer than the first one.

JavaScript might be a solution:

First prepare your mark-up:
```
<p id="abc">{TEXT}</p>
```
Where {TEXT} is your text truncated to 150 characters + ...

Now when we've got a good base for JavaScript we can try to make what you're looking for:

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

回复收藏 0 原文

~没有更多了~