CSS实现文本溢出显示省略号

最新推荐文章于 2024-04-26 22:14:41 发布

七月_Mo

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/mozifei73/article/details/128816611

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文本溢出分为两种状态：单行超出显示省略号和多行超出显示省略号

一、单行超出显示省略号

达到的效果如下
太阳是阳，黑夜是阴，世界是在阴阳平衡中运转的，这不在我们……
概述
如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
因此实现必须满足三个条件：

overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap;（设置文字在一行显示，不能换行，默认 normal 自动换行）
text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单行超出显示省略号</title>
  <style>
    .app {
      width: 400px;
      height: 28px;
      line-height: 28px;
      margin: 50px 0 0 50px;
      border: 1px solid red;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="app">
    <span class="content"> 太阳是阳，黑夜是阴，世界是在阴阳平衡中运转的，这不在我们的控制之中，但可以预测</span>
  </div>
</body>
</html>

二、多行超出显示省略号

达到的效果如下：

顶部“开始”面板中可以对字体、
字号、颜色、行距等进行修改。
标题数字等都可以……
概述
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核），对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式

overflow: hidden;（ /*1. 超出的部分隐藏 /）
text-overflow: ellipsis;（/2. 文字用省略号替代超出的部分 /）
display: -webkit-box;（/ 3. 弹性伸缩盒子模型显示 /）
-webkit-line-clamp: 2;（/ 4. 限制在一个块元素显示的文本的行数，这里限制2行/）
line-clamp: 2;
-webkit-box-orient: vertical;（/ 5. 和 4结合使用，设置或检索伸缩盒对象的子元素的排列方式 */）

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多行超出显示省略号</title>
  <style>
    .content {
      display: -webkit-box;
      width: 400px;
      line-height: 1.5;
      margin: 50px 0 0 50px;
      border: 1px solid red;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  </style>
</head>
<body>
  <div class="app">
    <span class="content">顶部“开始”面板中可以对字体、字号、颜色、行距等进行修改。标题数字等都可以通过点击和重新输入进行更改
    </span>
  </div>
</body>
</html>