修剪div的文本，但保留标记
[英]trim text of div but keeping the markers
问题描述
我想限制为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>
2 个解决方案
解决方案1
2 2018-06-29 09:26:32
您可以解析所有元素，获取文本长度，然后检查它是否是您的最大长度。 在这种情况下，您将其截断，而所有其他元素均为空： 请参见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标记）
解决方案2
1 2018-06-29 11:19:08
请使用以下代码：
var body = $(".views-field-body"); body.text(body.text().substring(0, 10));
.views-field-body { color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="views-field-body"> THis is a very long text. </div>
它的工作方式与您的代码相同，但是在这里我仅替换文本。
在您先前使用的函数中，该元素已被替换。
希望这会有所帮助。
如何在可编辑div中输入和删除预跨行包装的文本中的文本，同时保留span标签
[英]How to type and delete text in a pre-span-wrapped text in conteteditable div while keeping the span tag
当父div更改JavaScript中的大小时，动态设置行高/保持文本垂直居中
[英]Dynamically setting line-height/keeping text vertically centered when parent div changes size in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.