CSS超出显示省略号(单行&多行)、自动换行、强制不换行、强制断行
发布日期:2022-02-08 04:21:02 浏览次数:2 分类:技术文章

本文共 554 字,大约阅读时间需要 1 分钟。

上面这篇博客里有对各种换行的解释,就不再介绍了。下面主要介绍超出显示省略号,有两种情况,单行省略号显示、多行省略号显示。

单行省略号显示

原图:

在这里插入图片描述
现在我想让他一行显示,超出加省略号:给这个div加上三条css语句就成。

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

于是现在成了这种情况:其实就达到我们预期的结果了。

在这里插入图片描述

多行省略号显示

首先,不要规范容器的高度!!!规范的话,保持在你想要展示的几行内。不然,会有以下的效果,而这显然不是我们想要的。

在这里插入图片描述

display: -webkit-box;-webkit-line-clamp: 2;/*让他显示两行*/-webkit-box-orient: vertical;word-break: break-all;/* 允许在单词内换行。*/overflow: hidden;

在这里插入图片描述

-webkit-line-clamp

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

为了实现该效果,它需要组合其他外来的WebKit属性。

word-break: break-all;

允许在单词内换行

转载地址:https://blog.csdn.net/weixin_43297321/article/details/104576772 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:phpStudy+MySQL-Front连接数据库
下一篇:高光小球(径向渐变&mousemove事件)

发表评论

最新留言

不错!
[***.144.177.141]2024年03月24日 20时02分27秒