Vue过长文本单行展示,过长部分省略,拓展多行展示
目录需求解决效果拓展多行需求如下图,导航树结点内文本过长导致展示文本重叠。需要各行仅展示前本部分文本。解决在结点的样式中添加如下部分:display: block; /* 需要 */white-space: nowrap; /* 过长部分不换行 */text-overflow: ellipsis;/* 过长部分展示省略号 */overflow: hidden; /* 隐藏过长部分 */若出现dis
·
需求
如下图,导航树结点内文本过长导致展示文本重叠。
需要各行仅展示前本部分文本。
解决
在结点的样式中添加如下部分:
display: block; /* 需要 */
white-space: nowrap; /* 过长部分不换行 */
text-overflow: ellipsis; /* 过长部分展示省略号 */
overflow: hidden; /* 隐藏过长部分 */
若出现display的设置被其他地方设置的样式覆盖,可在其后添加:! important
效果
拓展多行
display: block; /* 需要 */
word-break: break-all; /* 需要 */
-webkit-line-clamp: 你需要的行数;
text-overflow: ellipsis; /* 过长部分展示省略号 */
overflow: hidden; /* 隐藏过长部分 */
更多推荐
已为社区贡献2条内容
所有评论(0)