首页 前端知识 前端 html 文字在 div 中实现自动换行

前端 html 文字在 div 中实现自动换行

2024-06-21 00:06:48 前端知识 前端哥 506 990 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13040.html
标签
评论
发布的文章

vue3生成聊天对话框功能

2024-07-10 18:07:36

json基本格式

2024-07-08 09:07:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!