单行文字溢出省略号显示

步骤：

1.强制文字一行显示

white-space: nowrap;

2.溢出部分隐藏起来

   overflow: hidden；

3.文字溢出的时候用省略号显示

   text-overflow: ellipsis;

效果：

样式：

 .ov-es{margin: 100px auto;width: 100px;height: 50px;background-color: orange;/* 1.强制文字一行显示 */white-space: nowrap;/* 2.溢出部分隐藏起来 */overflow: hidden;/* 3.文字溢出的时候用省略号显示 */text-overflow: ellipsis;}

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.ov-es{margin: 100px auto;width: 100px;height: 50px;background-color: orange;/* 1.强制文字一行显示 */white-space: nowrap;/* 2.溢出部分隐藏起来 */overflow: hidden;/* 3.文字溢出的时候用省略号显示 */text-overflow: ellipsis;}</style>
</head>
<body><div class="ov-es">此处省略100个文字，用省略号显示</div>
</body>
</html>

多行文字溢出省略号显示

步骤：

1.溢出部分隐藏起来

overflow: hidden;

2.溢出部分用省略号显示

text-overflow: ellipsis;

3.让普通盒子变成弹性伸缩盒子

 display: -webkit-box;

4.第几行显示省略号

 -webkit-line-clamp: 2;

5.设置弹性伸缩盒子的子元素的排列方式

 -webkit-box-orient: vertical;

效果：

样式：

在这里插入代码片  .ov-es{margin: 100px auto;width: 100px;height: 44px;background-color: orange;/* 1.溢出部分隐藏起来 */overflow: hidden;/* 2.溢出部分用省略号显示 */text-overflow: ellipsis;/* 3/让普通盒子变成弹性伸缩盒子 */display: -webkit-box;/* 4.第几行显示省略号 */-webkit-line-clamp: 2;/* 5.设置弹性伸缩盒子的子元素的排列方式 */-webkit-box-orient: vertical;}

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.ov-es{margin: 100px auto;width: 100px;height: 44px;background-color: orange;/* 1.溢出部分隐藏起来 */overflow: hidden;/* 2.溢出部分用省略号显示 */text-overflow: ellipsis;/* 3/让普通盒子变成弹性伸缩盒子 */display: -webkit-box;/* 4.第几行显示省略号 */-webkit-line-clamp: 2;/* 5.设置弹性伸缩盒子的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head>
<body><div class="ov-es">此处省略100个文字，用省略号显示</div>
</body>
</html>

css文字溢出省略号显示相关推荐

css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
css文字超出省略号显示
单行 width:100px; overflow: hidden;/*文字超出隐藏*/ text-overflow: ellipsis;/*文字超出省略号显示*/ white-space: nowra ...
CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
css多行文字溢出省略号显示
<style>div{width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 2.overflow:h ...
html css文字用省略号显示
1.单行省略号 <div class="one">哈哈哈哈哈哈哈哈哈哈或或或哈或或哈或哈哈或或哈或哈奥或哈哈哈或哈哈</div> .one{height: ...
CSS文字溢出省略号
单行文字溢出: .oneRowEllipsis {overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } 两行文字溢出: .twoRo ...
css 每个样式单行显示,单行文字溢出和多行文字溢出省略号显示的CSS样式
<JavaScript高级程序设计>读书笔记--(3)引用类型 ECMAScript从技术来说是一门面向对象的语言,但不具备传统的面向对象语言所支持的类和接口等基本结构.虽然引用类型与类看 ...
css设置文字溢出省略号显示
CSS文字溢出省略号，单行省略号，多行省略号
有些时候在文章列表的页面,文章标题只要显示固定宽度,那么我们就需要把多余的文字省略掉,这个时候就需要用省略号处理. 一.单行省略号设置 <style> .text{overflow: hi ...

css文字溢出省略号显示

单行文字溢出省略号显示

步骤：

效果：

样式：

代码：

多行文字溢出省略号显示

步骤：

效果：

样式：

代码：

css文字溢出省略号显示相关推荐

最新文章

热门文章