1200字范文 > css单行多行文本溢出隐藏显示省略号

css单行多行文本溢出隐藏显示省略号

时间：2021-01-01 09:59:23

相关推荐

css单行多行文本溢出隐藏显示省略号

单行文本溢出隐藏

overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 文本溢出时发生的事，ellipsis表示用省略号代替溢出的文本white-space: nowrap;// 规定段落中的文本不进行换行

多行文本溢出隐藏

overflow: hidden; // 溢出隐藏text-overflow: ellipsis;// 溢出用省略号显示display:-webkit-box; // 作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列式：从上到下垂直排列-webkit-line-clamp:3; // 显示的行数

示例代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 单行文本溢出隐藏 */div {width: 100px;background-color: antiquewhite;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 多行行文本溢出隐藏 *//* div {width: 100px;background-color: antiquewhite;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;} */</style></head><body><div>css实现单行、多行文本溢出隐藏显示省略号</div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。