我们如何在具有固定宽度和高度的多行 `` 元素上附加省略号 (...) 来指示截断？-js教程-PHP中文网

我们如何在具有固定宽度和高度的多行 `` 元素上附加省略号 (...) 来指示截断？

DDD

发布： 2024-10-27 08:23:30

原创

454 人浏览过

How can we append ellipses (...) to indicate truncation on a multi-line `` element with a fixed width and height?

固定宽度、多行文本溢出的省略号处理

在 Web 开发领域，需要优雅地处理指定容器内的文本溢出宽度和高度。我们如何附加省略号 (...) 来指示多行

上的截断元素？

可能的解决方案：

jQuery 提供了具有以下标记和 CSS 的解决方案：

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

登录后复制

<code class="css">#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}
#fos p {
  padding: 10px;
  margin: 0;
}</code>

登录后复制

重复的 jQuery 代码修剪文本的最后一个单词，直到达到所需的高度：

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}</code>

登录后复制

注意事项：

此技术可确保视觉上正确的结果，即使禁用 JavaScript。
服务器端截断可以提高性能。
这是一个不完整的解决方案，需要进一步完善以实现实际实现。

演示:

jsFiddle 上提供了现场演示：https://jsfiddle.net/5638d9y0/

其他资源：

[CSS 灵活盒教程](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[Flexbox 简介](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
[Flexbox 完整指南](https://www.w3schools.com/css/css3_flexbox.asp)

以上是我们如何在具有固定宽度和高度的多行 `` 元素上附加省略号 (...) 来指示截断？的详细内容。更多信息请关注PHP中文网其他相关文章！