CSS 超出部分显示省略号

Never Yu丶 2017-11-11 18:26:32

44834

分类专栏：前端文章标签： css ellipsis 省略号

本文链接：https://blog.csdn.net/csdn_yudong/article/details/78507909

版权

前端专栏收录该内容

156 篇文章 1 订阅

订阅专栏

文章目录

单行超出显示省略号
多行超出显示省略号

单行超出显示省略号

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>desktop demo</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>

效果图：

关键点：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行超出显示省略号

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>desktop demo</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>

效果图：
在这里插入图片描述

关键点：

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

Never Yu丶

关注

2
点赞
2
评论
7
收藏
一键三连
扫一扫，分享海报

专栏目录

插入表情

还能输入1000个字符