前言（日常废话）

该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示。

正文

现在有着一个这样的div，需要两个效果，一个是单行超出部分用省略号表示，一个是多行超出部分用省略号表示。
代码
css样式：

<style>/*初始样式*/.divStyle{position: relative;left: 1%;width: 100px;height: 90px;color: white;background-color: #132839;}
</style>

html结构：

<div class="divStyle">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666
</div>

效果展示

单行超出

代码
css样式：

<style>/*单行超出*/.nowrap {/*让长段文本不换行*/white-space: nowrap;/*设置文本超出元素宽度部分隐藏*/overflow-x: hidden;/*设置文本超出部分用省略号显示*/text-overflow: ellipsis;}
</style>

html结构：

<div class="divStyle nowrap">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666
</div>

效果展示

多行超出

代码

css样式：

<style>/*多行超出*/.wrap {/*让纯数字也可以换行显示*/word-break: break-all;/*将div变成弹性伸缩盒子模型display:box为display:flex的前身需要加浏览器私有属性来支持*/display: -webkit-box;/*设置或检索伸缩盒的子元素的排列方式目前所有主流浏览器都不支持box-orient属性。Firefox通过私有属性- MOZ-box-orient支持。Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.*//*值为vertical表示从顶部向底部垂直布置子元素*/-webkit-box-orient: vertical;/*设置要出现省略号的行数下面的3表示第三行出现省略号*/-webkit-line-clamp: 3;/*设置一个行高，更容易控制行数行高/元素高度=设置出现省略号的行数然后超出的部分隐藏起来  */line-height: 30px;/*超出高度的部分都隐藏起来目的主要是将设置了省略号那一行后面的内容都隐藏起来  */overflow-y: hidden;}
</style>

html结构：

<div class="divStyle wrap ">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666
</div>

效果展示

写给看贴的你

本人学识短浅，如有错误以及缺漏的地方请指正批评；如有涉及侵权，请手下留情，联系本人，看见即删（手动狗头保命）。
祝各位看官大佬们身体健康、诸事顺心、仙运荣昌、少写bug多加薪…

CSS实现单行(多行)文本超出部分用省略号显示相关推荐

《vue+vant 文本超出两行部分省略号显示》
今天做移动端项目,遇到了这个问题面向百度后总结得到了这个结果. 首先,我们要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis ...
文本超出长度用用省略号显示
div { width: 200px; height: 150px; background-color: pink; margin: 100px auto; /* 长单词和长数字,不会强行中断换行,默 ...
css文本超出部分用省略号显示
1. 单行文字省略 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
【CSS用法】css限制一行文字数量，超出部分用省略号显示
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. CSS代码: text-overflow:ellipsis; // 用省略号 ove ...
html中限制显示文字个数,【css/js】限制一行和多行文字数量，超出部分用省略号显示...
1. 设置一行文字显示文本数量,超出部分用-表示知识点:css3 text-overflow属性属性值描述 clip 修剪文本. ellipsis 显示省略符号来表明被修剪的文本. string ...
前端css 文本超出就隐藏并且显示省略号
目录文本超出加省略号单行文本溢出显示省略号多行文本超出隐藏单词超出加省略号单行单词溢出显示省略号多行单词溢出显示省略号跨浏览器兼容的方案表格中单行超出隐藏文本超出加省略 ...
css 实现div内显示一行、两行或三行，超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示两行或三行, ...
css实现div盒子内显示两行或三行，超出部分用省略号显示
1.div盒子内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.div盒子显示两行或 ...
css 实现div内显示固定三行，超出部分用省略号显示
css 实现div内显示两行或三行,超出部分用省略号显示一.div内显示一行,超出部分用省略号显示 white-space: nowrap;overflow: hidden;text-overflo ...

CSS实现单行(多行)文本超出部分用省略号显示

前言（日常废话）

目录

正文

单行超出

多行超出

写给看贴的你

CSS实现单行(多行)文本超出部分用省略号显示相关推荐

最新文章

热门文章