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

我希望能够显示最多10个字符的字符串。如果字符串超过10个字符，我想在末尾附加'...'。如何仅使用css显示字符串的一部分

举例来说，如果我有字符串：

'helloworldmynameisryan'

我希望它会显示如下所示：

'helloworld...'

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

<div>DisplayMessage</div>

是否有一个我可以创建的类只适用于字符串超过10个字符？

来源

2013-03-14 R Doolabh

一个确切的字符数是难以/不可能的，但可以肯定它限制宽度：http://stackoverflow.com/questions/15124838/how-to-keep-div-on-one-line -and-append-ellipses/15124873＃15124873 – 2013-03-14 04:31:27

字符数不会与CSS一起使用。正如Tim提到的那样，您的解决方案必须基于宽度。这是一个简单的解决方案：http://jsfiddle.net/8atfj/ – slamborne 2013-03-14 04:33:31

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

您可以使用字符串。长度属性在javascript来实现这一

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

希望这有助于。

来源

2013-03-14 04:38:47

它叫做省略号，你可以在块元素上使用它。

但是它在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-14 04:27:10 Amrendra

不使用任何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-14 04:27:16

http://www.electrictoolbox.com/ellipsis-html-css/ – 2013-03-14 04:34:01

的省略号是CSS3功能和迪菲测试时租用浏览器它有问题。一个快速解决的办法是定义一个特定的与div或跨度隐藏溢出，然后添加一个背景图像，说：“...“

来源

2013-03-14 04:29:28

-1

据quirksmode，如果还有很长的文字像

<div>11111111111111111111111111111111111111111111111111111111</div>

为了把这个包你有很多方法，使用<wbr>标签像下面

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

将显示如下
或使用代替，输出将是

111111111111111111111- 
1111111111111111111111

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

来源

2013-03-14 04:36:06 Exception

问题是关于截断，而不是包装。 – 2013-03-14 06:17:10

Firefox实际上现在支持这一点，你只需要确保无论你试图“截断”的块级格式和宽度 - 这可能是父级。

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

来源

2013-03-14 05:45:11

为什么100px会显示10个字符，除非意外？ – 2013-03-14 06:16:09

看起来比JavaScript解决方案更好，更干净，更快捷。 – iLevi 2013-03-14 16:53:07

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

回答

相关问题