我希望能够显示最多 10 个字符的字符串。如果字符串超过 10 个字符，我想在末尾附加“...”。
例如，如果我有字符串：
'helloworldmynameisryan'
我希望它像这样显示：
'helloworld...'
我只是在这样的 div 中显示我的字符串：
<div>DisplayMessage</div>
我可以创建一个仅在字符串超过 10 个字符时才适用的类？
【问题讨论】：
标签： javascript html css hide
最好的方法是使用：
text-overflow: ellipsis;
在你的 CSS 中
这会将您的文本限制为容器的宽度。如果文本超出宽度，则会显示为省略号 (...)。
这可能会有所帮助： https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
【讨论】：
Firefox 实际上现在确实支持这一点，您只需要确保您尝试“截断”的任何内容都具有块级格式和宽度 - 这可能是父级。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
width : 100px; /* this could be defined on any parent */
}
【讨论】：
不幸的是，没有一个好的跨浏览器方法可以仅使用 CSS 来做到这一点。 'text-overflow' 依赖于字符串的宽度，而不是你需要的字符串长度。
您可以在javascript中使用字符串的.length属性来实现这一点
function ellipsify (str) {
if (str.length > 10) {
return (str.substring(0, 10) + "...");
}
else {
return str;
}
}
希望这会有所帮助。
【讨论】：
根据quirksmode，如果有像
这样的长文本 <div>11111111111111111111111111111111111111111111111111111111</div>
要包装它有很多方法，请使用<wbr> 标记，如下所示
<div>111111111111111111111111111<wbr>11111111111111111111111111111</div>
它将显示为
1111111111111111111111
1111111111111111111111
或使用 &shy; 代替 ，输出将是
111111111111111111111-
1111111111111111111111
或者如果您正在寻找 JS 解决方案，请使用this。
【讨论】：
它被称为省略号，您可以在块元素上使用它。
但是它在 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/
【讨论】：
省略号是一个 css3 函数，在不同的浏览器中测试时会出现问题。一个快速的解决方法是为 div 或 span 定义一个特定的 with 并隐藏溢出，然后添加一个背景图像，上面写着“...”
【讨论】：
不使用任何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 */
}
【讨论】：