<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 属性的值。