文本省略号有更短的方法吗?只是一个提示,但它似乎最多只需要宽度和文本溢出吗?
width: (whatever);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
最佳答案
CSS 中的 text-overflow 属性处理文本溢出元素框时被剪裁的情况。它可以被剪裁(即切断、隐藏)、显示省略号 ('…', Unicode Range Value U+2026) 或显示作者定义的字符串(当前浏览器不支持作者定义的字符串)。
请注意,仅当容器的溢出属性的值为 hidden
、scroll
或 auto
和 white- 时,才会发生 text-overflow空格:nowrap;
.
.overflow {
width: 10em;
outline: 1px solid #000;
margin: 0 0 2em 0;
/**
* Required properties to achieve text-overflow
*/
white-space: nowrap;
overflow: hidden;
}
body style {
display: block;
font: 14px monospace;
padding: 3px;
margin: 0 0 5px 0;
}
<style>
.clip {
text-overflow: clip;
}
</style>
<p class="overflow clip">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
<style>
.ellipsis {
text-overflow: ellipsis;
}
</style>
<p class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
<style>
.word {
text-overflow: ellipsis-word;
}
</style>
<p class="overflow word">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
<style>
.text {
text-overflow: "---";
}
</style>
<p class="overflow text">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
<style>
.double {
text-overflow: ellipsis ellipsis;
text-align: center;
}
</style>
<p class="overflow double">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
关于CSS(文本溢出 : ellipsis) -- a shorter way?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45287815/