css之单行文字溢出省略号显示

最新推荐文章于 2024-06-05 09:45:20 发布

芒果水蜜桃

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量345

点赞数

分类专栏：前端学习笔记文章标签： css javascript css3

本文链接：https://blog.csdn.net/Meng19986082304/article/details/121076671

版权

前端学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述
单行文本溢出显示省略号——必须满足三条件

//1.强制一行内显示文本
white-space：nowrap;(默认自动换行)
//2.超出部分隐藏
overflow：hidden;
//3.文字用省略号代替超出部分
text-overflow：ellipsis；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单行文字溢出省略号显示</title>
  <style>
    div {
      width: 150px;
      height: 80px;
      background-color: pink;
      margin: 100px auto;
      /* normal：文字显示不开自动换行 */
      /* white-space: normal; */
      /* nowrap：文字显示不开也强制一行内显示 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div>
    我是世界上最美丽最善良的小宝宝此处省略一万字
  </div>

</body>

</html>

在这里插入图片描述多行文本溢出显示省略号
多行文本溢出显示省略号，有兼容性问题，适用于webKit浏览器或移动端（大部分时webKit内核）

overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 80px;
      background-color: pink;
      margin: 100px auto;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
  </style>
</head>

<body>
  <div>
    我是超级无尽美少女偶也欧布波u预防和环境设计符合双方
  </div>
</body>

</html>

在这里插入图片描述

芒果水蜜桃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css之单行文字溢出省略号显示

单行文本溢出显示省略号——必须满足三条件//1.强制一行内显示文本white-space：nowrap;(默认自动换行)//2.超出部分隐藏overflow：hidden;//3.文字用省略号代替超出部分text-overflow：ellipsis；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
复制链接

扫一扫