css实现单行文本溢出以及多行文本溢出

简介: css实现单行文本溢出以及多行文本溢出

css实现单行溢出隐藏以及多行溢出隐藏

单行溢出隐藏

//首先我们设置一个div盒子
<div class="texthidden">我是csdn博主第10086个小白。我是csdn博主第10086个小白。我是csdn博主第10086个小白。我是csdn博主第10086个小白。</div>
//在css文件中写入以下代码
.texthidden text {
  /* 单行文本溢出省略号代替 */
  /* 不换行 */
  white-space: nowrap;
  /* 内容隐藏 */
  overflow: hidden;
  /* 省略号代替 */
  text-overflow: ellipsis;
  /* overflow隐藏只对块级元素进行作用,所以需要将行内元素转成块级元素 */
  display: block;
}

实现效果如下


以下是多行文本省略的代码以及效果图

.texthidden text {
 /* 多行文本溢出省略号代替 */
 /* 浏览器厂商前缀,webkit内核 */
 display: -webkit-box;
 /* 内容隐藏 */
 overflow: hidden;
 /* 省略号代替 */
 text-overflow: ellipsis;
 /* 对齐的方向 */
 -webkit-box-orient: vertical;
 /* 行数 */
 -webkit-line-clamp: 2;
 }


到这里也就结束了,希望对您有所帮助。


相关文章
|
2天前
|
前端开发
css文本属性
css文本属性
15 0
|
1天前
|
前端开发
css文本垂直展示------
css文本垂直展示------
5 1
css文本垂直展示------
|
1天前
|
前端开发
css文本处理,单行多行溢出隐藏,首行缩进2字符,
css文本处理,单行多行溢出隐藏,首行缩进2字符,
4 0
|
2天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
2天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
2天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0
|
2天前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
30 2
|
2天前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
2天前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
前端开发
CSS文本加省略号
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766836 ...
943 0