文字超出显示区域后隐藏并显示省略号_李大同

文字超出显示区域后隐藏并显示省略号

发布时间：2020-12-14 19:29:35 所属栏目：资源来源：网络整理

导读：单行文字超出后隐藏首先容器需要有固定的宽高，其次加入以下代码即可。 view { overflow : hidden; text-overflow : ellipsis; white-space : nowrap;} 多行文字超出后隐藏容器不需要有固定的宽高，只需加入以下代码即可。无需指定高度，只需指定最多显示

单行文字超出后隐藏

首先容器需要有固定的宽高，其次加入以下代码即可。

view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文字超出后隐藏

容器不需要有固定的宽高，只需加入以下代码即可。
无需指定高度，只需指定最多显示几行，属性 -webkit-line-clamp。
本示例中最多显示3行，超出3行后，在第三行末尾用省略号代替显示。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!