如何通过CSS自动隐藏超出宽度的字不带省略号
2024-10-22 14:44:10
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
扩展资料：
上面是不带省略号，反之显示省略号
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 300px;
height: 300px;
background: red;
}
.pText {
display: block;
height: 30px;
width: 250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.aText {
width: 100px;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="div1">
<span>
<a>空白会被浏览器保留。其行为方式类似 HTML 中的标签。</a>
</span>
</div>
</body>
</html>
多行文本可以使用如下样式:
.intwoline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
2024-10-22 14:45:50
记得以后我初学的时候, 有隐藏的部分时,是会带 "..."的, 而且,我刚才用的4种浏览器(ie8, ff, opera, chrome) 浏览overflow:hidden的情况, 虽然3 个都是标准浏览器,ie8也已经很接近,但不同的浏览器浏览效果还是不一样.
2024-10-22 13:56:12
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义：
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
有...是ie的bug，在其他浏览器里不会有...
2024-10-22 08:09:33
热门标签
