主要内容
要让文本超过长度后,截取显示并附上省略号,可以通过如下的css代码实现:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width:100px;
有时候,我们需要根据文本是否省略做一些别的事情,例如显示一个展开按钮。现在是CSS控制文本省略了,如何检测到呢?
废话不多说,直接通过文本元素的clientWidth和scrollWidth来检测。
clientWidth是元素的可视宽度。scrollWidth是元素的滚动宽度,包括了滑动条边框和被隐藏的内容宽度。因此可以直接判断clientWidth和scrollWidth的大小,来确定是否文本被省略了。代码如下:
/**
* 文字是否被省略
* */
function isElipsis(id) {
var clientWidth = document.getElementById(id).clientWidth;
var scrollWidth = document.getElementById(id).scrollWidth;
return (clientWidth < scrollWidth); // 说明文字被省略了
}
测试截图:
1、内容未超出长度
2、内容超出长度
测试代码(可直接浏览器打开):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文字省略</title>
<style>
.container {
}
.text {
display: block;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
border:1px solid #cccccc;
width: 200px;
}
.collapse {
display: block;
background-color: #00ac3b;
flex: 1;
}
.res_container{
border:1px solid #cccccc;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<div>
<input type="text" id="input_content" vlaue="" placeholder="输入内容"/>
<button id="set">设置文本</button>
<button id="check">检查是否省略显</button>
</div>
<br/>
<div class="container">
<p>内容:<span id="content" class="text">这个是商户名称我觉得比较长了应该可以了</span></p>
</div>
<br/>
<div class="res_container">
<p>检查结果:<span id="res">未省略</span></p>
</div>
<script>
$(function () {
// 设置文本内容
$("#set").click(function () {
$("#content").text($("#input_content").val());
});
// 检查是否省略
$("#check").click(function () {
if(isEllipsis("content")){
$("#res").text("已省略")
}
});
// 检查是否省略
function isEllipsis(id) {
var clientWidth = document.getElementById(id).clientWidth;
var scrollWidth = document.getElementById(id).scrollWidth;
return clientWidth < scrollWidth;
}
});
</script>
</body>
</html>