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

相关文章
|
5天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
2天前
|
前端开发 UED
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
15 5
|
9天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
22天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
2天前
|
前端开发 开发者
CSS文本样式全面解析:从基础到进阶
CSS文本样式全面解析:从基础到进阶
8 0
|
2月前
|
前端开发
css文本垂直展示------
css文本垂直展示------
19 1
css文本垂直展示------
|
27天前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
5天前
|
移动开发 前端开发 HTML5
CSS3 文本相关属性
CSS3 文本相关属性
|
2月前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1
|
12天前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
11 0