text-overflow属性可以用来控制文本内容的溢出效果,常用的属性值有:
1. clip:默认值,表示文本内容超出容器范围时,直接裁剪掉超出部分。
2. ellipsis:表示文本内容超出容器范围时,显示省略号。
g:表示文本内容超出容器范围时,显示指定的字符串。
在使用text-overflow属性时,需要结合white-space属性和overflow属性来控制文本的显示效果。style>tent {
width: 200px;owrap; /* 不换行 */; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 超出容器范围显示省略号 */
}
/style>tent”>这是一段长度较长的文本内容,
二、使用JavaScript的substr()方法
substr()方法可以用来截取字符串的一部分,常用的参数有起始位置和截取长度。script>tent = “这是一段长度较长的文本内容,”;axLength = 20; // 最大显示长度tentgthaxLength) {tenttentaxLength) + “…”; // 超出部分用省略号代替
}enttent);
三、使用jQuery的text()方法
d()方法,可以轻松实现长度隐藏效果。style>tent {
width: 200px;owrap; /* 不换行 */; /* 溢出内容隐藏 */
}ore {
color: blue;ter; /* 鼠标指针变为手型 */
}
/style>in.js”>tent”>这是一段长度较长的文本内容,ore”>查看更多
script>tenttent”).text();axLength = 20; // 最大显示长度tentgthaxLength) {tenttentaxLength) + “…”; // 超出部分用省略号代替tenttent); // 设置文本内容orection () {tenttenttentgth – 3) + “…”);
$(this).hide(); // 隐藏“查看更多”按钮
});
}
else {ore”).hide(); // 隐藏“查看更多”按钮
}
以上就是三种常用的长度隐藏技巧,可以根据具体情况选择适合自己的方法来实现页面的美观度和用户体验的提升。