几种 换行方式、文本超出隐藏 及 单词内的断行方式CSS写法

2024-05-31 0 177

几种换行方式

1、自动换行

word-wrap: break-word;
word-break: normal;

2、强制不换行

white-space:nowrap;

3、强制换行

word-break:break-all;
word-wrap:break-word;

文本超出使用省略号(…)隐藏

1、单行超出显示 …

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2、多行超出显示 …

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  //控制显示几行
-webkit-box-orient: vertical;   //webbox方向

指定在单词内断行的断行方式

CSS 属性 word-break 指定了怎样在单词内断行。

word-break : normal | break-all | keep-all

normal:使用浏览器默认的换行规则。
break-all:可在任意字符间断行。
keep-all:文本不断行,只能在半角空格或连字符处换行。
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

优模板 建站知识 几种 换行方式、文本超出隐藏 及 单词内的断行方式CSS写法 https://www.youmuban.com/438.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务