在 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一起来设置！
基本思路：
-
获取文本所在的DOM元素和其文本内容。
-
判断文本是否超出容器宽度，如果超出，则需要对文本进行截断。
-
根据需要截断的位置，将文本前半部分和后半部分分别包裹在两个span元素中，并在它们之间插入一个省略号。
-
将新的HTML内容写回到DOM元素中。
代码示例（假设文本所在的DOM元素有一个类名叫做 "text-container"）：文章来源：https://www.toymoban.com/news/detail-468461.html
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.toymoban.com/news/detail-468461.html
到了这里，关于HTML中文本过长、超出限制字数时自动隐藏末尾部分或中间等任意部分的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
