如何包装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-ellipsis

Answer 2

如果您使用php，则可以使用函数 substr（$ text，$ start，$ length），文档here如下：

<?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 该文档：here 像这样：

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

希望对您有帮助