文章目录[隐藏]
单行文字溢出省略号显示
隐藏溢出一共分为三个部分,第一个部分需要将文字显示为一行内显示,第二个部分将多余部分隐藏,第三部分超出部分省略。
将文字一行显示
- white-space属性用于控制元素内部空白字符的处理方式
white-space: normal;
如果文字显示不开自动换行(默认)div {width: 100px;background-color: #43ff3d;/* 如果文字显示不开自动换行(默认) */white-space: normal;}div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开自动换行(默认) */ white-space: normal; }
div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开自动换行(默认) */ white-space: normal; }
white-space: nowrap;
如果文字显示不开则强制一行div {width: 100px;background-color: #43ff3d;/* 如果文字显示不开则强制一行 */white-space: nowrap;}div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; }
div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; }
多余部分隐藏
使用overflow: hidden;
可以把多余部分隐藏。
<style>div {width: 100px;background-color: #43ff3d;/* 如果文字显示不开则强制一行 */white-space: nowrap;/* 溢出部分隐藏 */overflow: hidden;}</style><style> div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; /* 溢出部分隐藏 */ overflow: hidden; } </style><style> div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; /* 溢出部分隐藏 */ overflow: hidden; } </style>
超出部分省略
使用text-overflow: ellipsis;
可以把多余部分转为省略号。
div {width: 100px;background-color: #43ff3d;/* 如果文字显示不开则强制一行 */white-space: nowrap;/* 溢出部分隐藏 */overflow: hidden;/* 利用省略号代替超出部分 */text-overflow: ellipsis;}div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; /* 溢出部分隐藏 */ overflow: hidden; /* 利用省略号代替超出部分 */ text-overflow: ellipsis; }div { width: 100px; background-color: #43ff3d; /* 如果文字显示不开则强制一行 */ white-space: nowrap; /* 溢出部分隐藏 */ overflow: hidden; /* 利用省略号代替超出部分 */ text-overflow: ellipsis; }
多行文字溢出省略号显示(兼容不好)
多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)
div {width: 100px;background-color: #43ff3d;/* 溢出部分隐藏 */overflow: hidden;/* 利用省略号代替超出部分 */text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制一个块元素显示文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素排列方式 */-webkit-box-orient: vertical;}div { width: 100px; background-color: #43ff3d; /* 溢出部分隐藏 */ overflow: hidden; /* 利用省略号代替超出部分 */ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制一个块元素显示文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素排列方式 */ -webkit-box-orient: vertical; }div { width: 100px; background-color: #43ff3d; /* 溢出部分隐藏 */ overflow: hidden; /* 利用省略号代替超出部分 */ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制一个块元素显示文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素排列方式 */ -webkit-box-orient: vertical; }
没有回复内容