我是靠谱客的博主 甜甜小鸽子,最近开发中收集的这篇文章主要介绍CSS文本设置超出2行显示省略号...,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

一、超出1行显示省略号…

设置宽度/最大宽度
width: 100%; / max-width: 100%;

核心代码
overflow: hidden; // 超出范围不显示
white-space: nowrap; // 超出不换行
text-overflow: ellipsis; // 超出的文本显示省略号...

二、超出2行显示省略号…

设置宽度/最大宽度
width: 100%; / max-width: 100%;

核心代码
overflow: hidden; //超出文本隐藏
text-overflow: ellipsis; ///超出部分省略号显示
display: -webkit-box; //弹性盒模型
-webkit-box-orient: vertical; //上下垂直
-webkit-line-clamp: 2; //自定义行数

最后

以上就是甜甜小鸽子为你收集整理的CSS文本设置超出2行显示省略号...的全部内容,希望文章能够帮你解决CSS文本设置超出2行显示省略号...所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(82)

评论列表共有 0 条评论

立即
投稿
返回
顶部