如何使用 CSS 仅显示字符串中的前 10 个字符?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5182009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:51:10  来源:igfitidea点击:

How do I display only the first 10 characters from a string using CSS?

css

提问by Franco

I have a string of 30 characters

我有一个 30 个字符的字符串

I want to only display the first 10 followed by ...

我只想显示前 10 个,然后是 ...

so for example

所以例如



thisisastringthatis30characterslong

这是 30 个字符长的字符串

would become

会成为

thisisastr...

这...



Is this possible using CSS?

这可以使用 CSS 吗?

Cheers!

干杯!

采纳答案by jeroen

It′s called ellipsisand you can use it on a block element.

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

However it does not work in Firefox and you cannot set the width to exactly 10 characters as you cannot specify the width in characters in css.

但是它在 Firefox 中不起作用,并且您不能将宽度设置为 10 个字符,因为您无法在 css 中以字符为单位指定宽度。

If you want exactly 10 characters and Firefox compatibility you will have to use javascript or a server-side solution.

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

回答by Draco Ater

There is a CSS3 based solutiontext-overflow:ellipsis;claimed to be crossbrowser. But also it will show as many chars as fit, not exactly 10.

有一个基于 CSS3 的解决方案text-overflow:ellipsis;声称是跨浏览器。但它也会显示尽可能多的字符,而不是 10 个。