13

我希望能够显示最多 10 个字符的字符串。如果字符串超过 10 个字符，我想在末尾附加“...”。

例如，如果我有字符串：

'helloworldmynameisryan'

我希望它像这样显示：

'helloworld...'

我只是在这样的 div 中显示我的字符串：

<div>DisplayMessage</div>

是否有一个我可以创建的类仅在字符串超过 10 个字符时才适用？

4

7 回答 7

15

不幸的是，没有一个好的跨浏览器方法可以只使用 CSS 来做到这一点。'text-overflow' 依赖于字符串的宽度，而不是您需要的字符串长度。

您可以在 javascript 中使用字符串的 .length 属性来实现这一点

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

希望这可以帮助。

于 2013-03-14T04:38:47.090 回答
7

Firefox 实际上现在确实支持这一点，您只需要确保您尝试“截断”的任何内容都具有块级格式和宽度 - 这可能是父级。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}
于 2013-03-14T05:45:11.470 回答
4

不使用任何serverside脚本或者javascript你不能这样做。

使用以下功能。

function LimitCharacter($data,$limit = 20)
{
    if (strlen($data) > $limit)
    {
        $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
        return $data;
    }
    else
    {
        return $data;
    }
}

称它为LimitCharacter($yourString,5);

Javascript

var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";

CSS

.limtiCharClass {
    -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 */
}
于 2013-03-14T04:27:16.667 回答
3

它称为省略号，您可以在块元素上使用它。

但是它在 Firefox 中不起作用，并且您不能将宽度设置为正好 10 个字符，因为您不能在 css 中指定字符宽度。

如果您想要正好 10 个字符和 Firefox 兼容性，则必须使用 javascript 或服务器端解决方案。

检查省略号：http ://www.quirksmode.org/css/textoverflow.html

或试试这个：

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

用于此的 jQuery 插件：

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

于 2013-03-14T04:27:10.407 回答
0

省略号是一个 css3 函数，在不同的浏览器中进行测试时会出现问题。一个快速的解决方法是定义一个特定的 div 或 span 并隐藏溢出，然后添加一个背景图像，上面写着“......”

于 2013-03-14T04:29:28.413 回答
0

最好的方法是使用：

text-overflow: ellipsis;

在你的 CSS

这会将您的文本限制为容器的宽度。如果文本超出宽度，则会显示为省略号 (...)。

这可能会有所帮助： https ://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

于 2019-02-05T12:10:03.673 回答
-1

根据quirksmode，如果有像这样的长文本 

 <div>11111111111111111111111111111111111111111111111111111111</div>

要包装它，你有很多方法，使用<wbr>如下标签 

 <div>111111111111111111111111111<wbr>11111111111111111111111111111</div>

它将显示为
1111111111111111111111 1111111111111111111111 或使用&shy;代替 ，输出将是 

 111111111111111111111-
 1111111111111111111111

或者，如果您正在寻找 JS 解决方案，请使用此.

于 2013-03-14T04:36:06.950 回答