CSS 限制文字行数(超出显示省略号...)

简介: CSS 限制文字行数(超出显示省略号...)

/* 单行隐藏  */
.xxx {
  /* 文本不换行 */
  white-space: nowrap;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
}
/* 多行隐藏  */
.xxx {
  /* 在恰当的断字点进行换行 */
  word-break: break-all;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
  /* 盒子模型 */
  display: -webkit-box;
  /* 显示的文本行数 */
  -webkit-line-clamp: 3;
  /* 子元素的垂直排列方式 */
  -webkit-box-orient: vertical;
}

相关文章
|
1月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
31 6
|
1月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
37 6
|
1月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
24 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
69 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
Web App开发 前端开发 iOS开发
|
前端开发 定位技术 索引
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
|
前端开发
css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
原文:css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…) 记录几种常见的文字效果 示例查看:http://pangyongsheng.github.io/cssFont/ 一、文字剪贴蒙版 在PS中,对文字图层栅格化,然后可将其他图层创建为文字的剪贴蒙版,而在c...
1290 0
|
前端开发
CSS文字排版
一、font-size   我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red。 DOCTYPE HTML> 字号、颜色 body{font-family:Microsoft Yahei;font-size:12px;color:#666;} .stress{font-size:20px;color:red;} 勇气 三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。
1212 0