我想限制为 10 个字符，但保持风格。
var body=$(".views-field-body");
body.replaceWith(body.text().substring(0, 10));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="views-field views-field-body"><div class="field-content"><p><strong>Sed quid est quod</strong> in hac causa maxime homines admirentur et reprehendant</p>
<p>meum consilium</p></div></div>最佳答案
您可以解析所有元素，获取文本长度并检查是否是您的最大长度。在这种情况下，您将其 chop ，并且所有其他元素均为空: See on CodePen
HTML:
$(function() {
var textLength = 0;
var maxLength = 52;
$('*:not(style, script)').each(function(i, element) {
if (textLength < maxLength) {
if ($(element).children().length > 0)
return;
else {
let localLength = $(element).text().length;
textLength += localLength;
console.log(textLength);
if (textLength > maxLength) {
$(element).text($(element).text().substring(0, (textLength + maxLength) - $(element).text().length));
}
}
} else {
$(element).text('');
}
});
});.last-one {
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>My limited page</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque velit, rutrum id arcu eget, faucibus interdum odio. Aenean viverra semper lacus, vel convallis ex accumsan non. Fusce sapien ligula, porta eleifend egestas a, lobortis ac augue. Vivamus sed nisi non dolor tincidunt feugiat vel ac sem. Nam tristique urna ut tortor ultricies pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ac diam in est dictum egestas id nec quam. Cras sed blandit libero. Maecenas maximus arcu quis orci maximus pulvinar. Sed vulputate leo nec nibh consequat vestibulum. Donec finibus sed risus quis interdum. Aliquam scelerisque sed lectus at tempus. Sed tristique pulvinar magna, ut pellentesque justo tempor in.
Integer risus arcu, rhoncus sed elementum vel, auctor sed est. Curabitur quis commodo velit. Donec blandit, ipsum eget ornare ornare, ex magna mollis augue, sit amet fringilla magna nulla ac libero. Fusce at mauris ut orci lobortis aliquam. In magna ligula, sagittis ut aliquam quis, tristique et augue. Nunc in tellus porta, fermentum ante quis, molestie nisl. Curabitur at ex sapien. Aliquam ac lacinia diam. Sed in dui ac arcu euismod viverra et sit amet nulla. Morbi urna turpis, accumsan non dolor sit amet, lobortis mattis diam. Pellentesque metus tortor, consequat cursus magna id, vulputate luctus nulla. Vivamus faucibus a justo id tincidunt.
Nulla vitae tortor finibus, aliquet sem vel, fermentum magna. Maecenas sit amet libero sed libero pellentesque ultricies. Nullam quam massa, maximus sed elit eu, pulvinar ultrices libero. Curabitur sit amet vestibulum libero, id blandit nulla. Nunc consectetur mollis congue. Aliquam id pulvinar nisi. Aenean cursus pulvinar leo, non viverra ipsum lobortis vitae. Mauris ac dictum libero, eu fermentum quam. Nam felis erat, congue quis elementum rutrum, ultricies quis lacus. Nunc nec risus sit amet justo malesuada elementum. Aliquam ac enim vestibulum, mollis leo a, tincidunt orci. Aliquam convallis, mi quis tincidunt euismod, nisl urna vulputate magna, ut suscipit magna urna aliquet est. Aliquam dui orci, dapibus sit amet feugiat a, aliquam sit amet orci.
Sed vestibulum nulla et vulputate ornare. Donec risus turpis, mattis vitae metus quis, dignissim egestas ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas tempor tortor, sed tincidunt tortor pulvinar quis. Nulla et feugiat odio. Maecenas faucibus eros vitae dictum hendrerit.
Nullam aliquam, ante a tempus suscipit, dui eros eleifend augue, sit amet rutrum enim nisi at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vel turpis quam. Cras aliquam sem neque, sed pharetra risus vestibulum eget. Phasellus posuere dapibus nulla non laoreet. Praesent iaculis ultrices pharetra. Nullam aliquet suscipit iaculis. Nam sed libero in turpis facilisis vehicula. Donec viverra nisl nec mauris pharetra ullamcorper. Pellentesque pellentesque sit amet lacus at laoreet. Curabitur ultrices a mauris viverra laoreet.</p>
<p class="last-one"> The end? </p>
</body>
</html>(最后一个类在这里，只是为了让你看到 HTML 标签没有被触及)
关于javascript - trim div 的文本但保留标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51097854/