一、使用text-overflow属性
在CSS样式中使用text-overflow属性可以实现文字溢出时隐藏并显示省略号。该属性需要与overflow属性一起使用，它支持三个值：
text-overflow: clip; //默认值，直接截断 text-overflow: ellipsis; //用省略号表示被修剪的文本 text-overflow: string; //用给定的字符串表示被修剪的文本
例如：
.overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //保证不换行
width: 200px; //让容器被限制为 200 像素宽
}
二、使用JavaScript实现
如果需要动态计算文字长度，就需要使用JavaScript来实现。可以通过获取文本的大小和容器大小来判断是否需要省略。
<div id="container">
<p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus cumque consectetur, aspernatur officia debitis quaerat facilis odit totam praesentium voluptate? Facere sed eius repellendus aliquam incidunt dignissimos earum cupiditate error!</p>
</div>
<script>
var text = document.getElementById("text");
var container = document.getElementById("container");
var containerWidth = container.offsetWidth;
var textWidth = text.offsetWidth;
if (textWidth > containerWidth) {
var textContent = text.textContent;
while (textWidth > containerWidth) {
textContent = textContent.slice(0, -1);
text.textContent = textContent + "...";
textWidth = text.offsetWidth;
}
}
</script>
三、使用jQuery插件
如果使用jQuery，可以使用它提供的插件jquery.dotdotdot来实现。可以通过简单的配置来实现省略号的效果。
//引入jQuery和jquery.dotdotdot插件库
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.9.1/jquery.dotdotdot.min.js"></script>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus minima quod reprehenderit, nobis autem, quos dolorem cupiditate non aliquam modi ipsa cumque saepe iste, sunt recusandae id omnis necessitatibus.
</div>
<script>
$(document).ready(function() {
$('.text').dotdotdot({
height: 100,
ellipsis: '...',
wrap: 'word',
fallbackToLetter: true,
watch: true
});
});
</script>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/287322.html
微信扫一扫 
支付宝扫一扫 