css设置单行文本超出部分点点点、多行文本超出部分点点点（两种方法）/解决多行 数字不换行问题。

一、单行文本、超出部分点点点

1. 有宽度：width, 有宽度才能超出，所以至少是行内块级元素
2. 不能换行：white-space:nowrap;
3. 超出部分隐藏：overflow: hidden;
4. 文本超出部分点点点：text-overflow: ellipsis;

div {
	width: 200px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

二、设置多行文本、指定行数、最后一行点点点

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

三、利用 Zent 组件库 ClampLines【最简单的…】

import { ClampLines } from 'zent';

<div style={{ width: 400, color: '#666', fontSize: 14 }}>
    <ClampLines
      lines={3}
      popWidth={400}
      showPop={false} // 是否显示提示
      text="Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"
    />
</div>

showPop 属性控制着是否显示提示，默认为true 的时候如下，会有弹框提示：

四、多行点点点遇到的问题：数字不会自动换行，如图：

利用 word-break: break-all; 属性完美解决。

div{
	word-break: break-all;
}