CSS 超出部分显示省略号

时间 2019-11-08

标签 css 超出部分显示省略号栏目 CSS 繁體版

原文原文链接

直接看代码：html

<!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>

果图：
app

关键点：spa

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

1. CSS 超出部分显示省略号
2. css 超出部分，显示省略号
3. css 超出部分显示省略号
4. CSS省略号text-overflow超出溢出显示省略号
5. css文字超出显示省略号
6. css超出两行显示省略号
7. css多行超出显示省略号
8. CSS控制文字，超出部分显示省略号
9. css设置文字超出部分显示省略号。。。
10. css/js 超出部分显示省略号
更多相关文章...
• 使用 CSS 显示 XML - XML 教程
• ADO 显示 - ADO 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Git五分钟教程