<style>
.tooltiptext {
width: 390px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 100;
overflow: hidden;
white-space: normal;
word-break: normal;
text-overflow: ellipsis;
text-align: center;
border-radius: 6px;
font-size: 15px;
padding: 5px 5px;
color: rgba(18,26,44,0.8);
position: relative;
z-index: 1;
left: 0%;
top: 110%;
}
</style>
<div class="tooltiptext"> Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text
</div>
CSS 属性
-webkit-line-clamp
属性:可以把块容器中的内容限制为指定的行数。
- 它只有在 display 属性设置成
-webkit-box
或者-webkit-inline-box
并且 box-orient 属性设置成vertical
时才有效果。 - 在大部分情况下,也需要设置 overflow 属性为
hidden
,否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号。
box-orient 属性:设置元素是水平布局还是垂直布局其内容。
text-overflow 属性:用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号(“…
”)或显示一个自定义字符串。
white-space 属性:设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的“ <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-break 属性:规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
overflow 属性:规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。