首页 前端知识 HTML中文本过长、超出限制字数时自动隐藏末尾部分或中间等任意部分

HTML中文本过长、超出限制字数时自动隐藏末尾部分或中间等任意部分

2024-07-21 00:07:28 前端知识 前端哥 997 917 我要收藏

在 HTML 中,可以使用 CSS 样式来控制文本的长度和显示方式。  

单行文本溢出显示省略号

        使用 text-overflow 属性:这个属性可以控制文本超出容器宽度时的显示方式,例如隐藏末尾部分。可以将其设置为 “ellipsis” 表示在末尾添加省略号。示例代码如下:

<style> 
    .text { 
        width: 200px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    } 
</style> 
<div class="text">
    这是一段很长的文本内容,超过了容器的宽度,会自动隐藏末尾部分并显示省略号。
</div>

多行文本溢出显示省略号

        多行文本溢出显示省略号可以使用CSS3中的-webkit-line-clamp属性来实现。

        示例代码如下:

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示2行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

        以上CSS代码中,我们使用了-webkit-box-webkit-box-orient将其设置为一个垂直盒装容器,同时使用-webkit-line-clamp属性控制文本在容器内最大展示的行数,例如上述代码中设置为2行,则文本内容超过两行时就会自动省略并显示省略号。 

        在HTML中应用该样式:

<p class="ellipsis">这是一段超长的文本,如果超出两行就显示省略号。</p>

需要注意的是,目前该实现方法只在WebKit内核的浏览器(如Safari、Chrome等)中适用,并且需要添加-webkit-前缀以兼容不同浏览器。

那么如果要隐藏中间部分呢?这个时候光写css是达不到我们想要的效果的我们需要使用JavaScript一起来设置!

基本思路:

  1. 获取文本所在的DOM元素和其文本内容。

  2. 判断文本是否超出容器宽度,如果超出,则需要对文本进行截断。

  3. 根据需要截断的位置,将文本前半部分和后半部分分别包裹在两个span元素中,并在它们之间插入一个省略号。

  4. 将新的HTML内容写回到DOM元素中。

代码示例(假设文本所在的DOM元素有一个类名叫做 "text-container"):

var textContainer = document.querySelector('.text-container');
var originalText = textContainer.textContent;
var containerWidth = textContainer.offsetWidth;

if (textContainer.scrollWidth > containerWidth) {
  var halfLength = Math.floor(originalText.length / 2);
  var newText = '<span>' + originalText.substr(0, halfLength) + '</span>...<span>' + originalText.substr(halfLength) + '</span>';
  textContainer.innerHTML = newText;
}

以上就是常用的几种控制文本长度和显示方式的方法,具体使用可以根据我们实际开发需要选择。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14094.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!