Question

我希望能够显示最多10个字符的字符串。如果字符串超过10个字符，我想将'...'追加到最后。

例如，如果我有字符串：

'helloworldmynameisryan'

我希望它显示如下：

'helloworld...'

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

<div>DisplayMessage</div>

是否有一个我可以创建的类，只有在字符串超过10个字符时才会应用？

Answer 1

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

您可以在javascript中使用字符串的.length属性来实现此目的

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

希望这有帮助。

Answer 2

实际上Firefox确实支持这个，你只需要确保你试图“截断”的任何东西都有块级格式和宽度 - 这可能是父级。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}

Answer 3

不使用任何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 */
}

Answer 4

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

但是它在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/

Answer 5

省略号是css3函数，在不同的浏览器中测试时会出现问题。快速解决方法是定义具有溢出隐藏的div或span的特定内容，然后添加背景图像，其中显示“...”

Answer 6

最好的方法是使用：

text-overflow: ellipsis;

在您的CSS中

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

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

Answer 7

根据quirksmode，如果有长文本，如

 <div>11111111111111111111111111111111111111111111111111111111</div>

要包装它，您有很多方法，请使用<wbr>标记，如下所示

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

它将显示为
1111111111111111111111 1111111111111111111111 或者使用代替，输出将是

 111111111111111111111-
 1111111111111111111111

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

如何仅使用css显示字符串的一部分

7 个答案: