一、单行文本、超出部分点点点
- 有宽度:width, 有宽度才能超出,所以至少是行内块级元素
- 不能换行:white-space:nowrap;
- 超出部分隐藏:overflow: hidden;
- 文本超出部分点点点: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;
}