【CSS】文字超出显示省略号&连续字符换行

【CSS】文字超出显示省略号&连续字符换行,第1张

【CSS】文字超出显示省略号&连续字符换行

方法1.多行控制(css3)

.text {
width: 100%;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
overflow: hidden;
}

line-clamp:几行以后显示省略号(例子为2行)

方法2.单行定宽

.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

应用在block级的元素上

连续字符换行问题

p{
word-break:break-all;
word-wrap:break-word;
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/586960.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存