javascript - 如何包装 div 的内容并在最后添加…？

Question

我有一个div显示内容的。我的要求是如果超过 10 个字符，则必须显示

10 characters + '...'

我可以使用 jQuery 和 PHP。

Answer 1

要将文本限制为仅显示，特别是 10 个字符会很棘手，因为您需要根据字体设置计算文本宽度。

如果您使用像 em 这样的单位，则无需为此烦恼，并且显示的文本几乎与您想要的宽度相同。

有一个可编辑的例子：

http://jsfiddle.net/flaviocysne/88nLY/2/

基于这些站点示例：

http://www.quirksmode.org/css/textoverflow.html

http://davidwalsh.name/css-省略号

Answer 2

如果你使用 php，你可以使用函数substr($text, $start, $length) ，这里的文档是这样的：

<?php

$test = "Lorem ipsum dolor sit amet consectetur adipisici";
// fonction to split the part of text if necessary
$result = strlen($test)>10 ? substr($test, 0, 10).'....': $test;
// to display the text: and don't check the length of string
echo $result;

所以在 jQuery 中，你有太多的功能substr文档：这里 是这样的：

$(document).ready(function() {
 let text = "Lorem ipsum dolor sit amet consectetur adipisici"
 let result = text.length > 10 ? text.substr(0, 10)+"..." : text;
 
 alert(result);
});

我希望它对你有帮助