Html 如何使用 css 只显示字符串的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15401179/
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
How do I only display part of a string using css
提问by R Doolabh
I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I'd like to append '...' to the end.
我希望能够显示最多 10 个字符的字符串。如果字符串超过 10 个字符，我想在末尾附加 '...'。
For example, if I have the string:
例如，如果我有字符串：
'helloworldmynameisryan'
I want it to be displayed like so:
我希望它像这样显示：
'helloworld...'
I'm just displaying my string in a div like this:
我只是在这样的 div 中显示我的字符串：
<div>DisplayMessage</div>
Is there a class that I could create that would only apply if the string were over 10 char?
是否有一个我可以创建的类只适用于字符串超过 10 个字符的情况？
回答by Sushant Sudarshan
Unfortunately there isn't a good cross browser way to do this using only CSS. 'text-overflow' relies on the width of the string, and not the length of string as you need.
不幸的是，没有一种好的跨浏览器方式来仅使用 CSS 来做到这一点。'text-overflow' 取决于字符串的宽度，而不是您需要的字符串长度。
You can use the .length property of strings in javascript to achieve this
您可以在 javascript 中使用字符串的 .length 属性来实现此目的
function ellipsify (str) {
if (str.length > 10) {
return (str.substring(0, 10) + "...");
}
else {
return str;
}
}
Hope this helps.
希望这可以帮助。
回答by Carrie Morrison
Firefox does in fact now support this, you just need to ensure that whatever you are trying to 'truncate' has block level formatting and a width - which could be the parent.
Firefox 实际上现在支持这一点，您只需要确保您尝试“截断”的任何内容都具有块级格式和宽度 - 这可能是父级。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
width : 100px; /* this could be defined on any parent */
}
回答by Dipesh Parmar
Without using any serversidescript or javascriptyou can not do this.
不使用任何serverside脚本，否则javascript您无法执行此操作。
Use below function.
使用以下功能。
function LimitCharacter($data,$limit = 20)
{
if (strlen($data) > $limit)
{
$data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
return $data;
}
else
{
return $data;
}
}
call it as LimitCharacter($yourString,5);
称之为 LimitCharacter($yourString,5);
Javascript
Javascript
var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";
CSS
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 */
}
回答by Amrendra
it′s called ellipsis and 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 或服务器端解决方案。
check ellipsis:http://www.quirksmode.org/css/textoverflow.html
检查省略号：http: //www.quirksmode.org/css/textoverflow.html
or try this:
或者试试这个：
.ellipsis{
white-space:nowrap;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
jQuery plugin for this:
jQuery 插件：
http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/
http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/
回答by Naveen Narale
The ellipses is a css3 function and when testing in different browsers it has issues. A quick get around would be to define a specific with to the div or span with overflow hidden and then add a background images which says "..."
省略号是一个 css3 函数，在不同浏览器中测试时会出现问题。一个快速的解决方法是定义一个特定的 div 或跨度隐藏溢出，然后添加一个背景图像，上面写着“...”
回答by Abdelrahman Mahmoud
The best way is using:
最好的方法是使用：
text-overflow: ellipsis;
in your css
在你的 css 中
This will restrict your text to the width of the container. If the text exceeds the width, it will instead be displayed with an ellipsis (...).
这会将您的文本限制为容器的宽度。如果文本超过宽度，则会显示为省略号 (...)。
This may help: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
这可能会有所帮助：https: //www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
回答by Exception
According to quirksmode, if there is a long text like
根据quirksmode，如果有像这样的长文本
<div>11111111111111111111111111111111111111111111111111111111</div>
To wrap this you have many ways, use <wbr>tag like below
要包装它，您有多种方法，请使用<wbr>如下所示的标签
<div>111111111111111111111111111<wbr>11111111111111111111111111111</div>
It will be displayed like
1111111111111111111111
1111111111111111111111
or use ­instead of , output will be
它将显示为
1111111111111111111111 11111111111111111111111 或使用­代替，输出将是
111111111111111111111-
1111111111111111111111
Or if you are looking for JS solution, then use this.
或者，如果您正在寻找 JS 解决方案，请使用此.
