css设置文本超过宽度后显示省略号点点点

简介: css设置文本超过宽度后显示省略号点点点

这个属性用的贼多,我还老是忘,今天记录一下

单行文本显示省略号

1..a{
   overflow:hidden; /*超出的部分隐藏起来。*/ 
   white-space:nowrap;/*不让文本换行,在一行显示*/
   text-overflow:ellipsis;/*超出显示...*/
}

多行文本超出显示省略号

-webkit-是webkit内核的前缀(Chrome)
 .a{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp:2 ;/*限制在块元素文本的行数,它需要组合其他的WebKit属性*/
    -webkit-box-orient:vertical;/*设置盒子的子元素的排列方式*/
}

最后补充:

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器),可以直接使用WebKit的CSS扩展属性

text-overflow:设置文字溢出之后的效果

image.png

相关文章
|
17天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
6天前
|
前端开发 JavaScript UED
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
28 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
41 2
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
64 28
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
1月前
|
Web App开发 前端开发 iOS开发
|
前端开发 容器
CSS 实现图片宽度自适应
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876666 ...
3019 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果