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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年03月24日 20时02分27秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
python 3 读取文件txt 打印print
2019-04-21
python 查找txt文件中的字符串
2019-04-21
python 字符串替换 本地地址转换为网络地址
2019-04-21
Python3 http 服务任意目录 设定访问目录
2019-04-21
Python 移动鼠标到 句柄指定位置
2019-04-21
python窗口置顶 并输入中文
2019-04-21
Android studio 读取sd卡mp3 播放音乐
2019-04-21
Android studio 47 listview 处理单击和长按事件
2019-04-21
android studio 48 Android选项卡TabHost
2019-04-21
android studio 49自定义 ListView
2019-04-21
android studio 50
2019-04-21
androdi Studio 51 mp3
2019-04-21
android studio 52 mp3下载客户端001
2019-04-21
android studio 53 mp3
2019-04-21
Android studio 53 文件下载
2019-04-21
android studio 54 下载进度条
2019-04-21
android studio 70 歌曲服务器搭建 歌曲app 完整代码(发布版)
2019-04-21
Android单击事件处理与监听003
2019-04-21
vb 读取mysql所有表名_vb怎么列举出一个mdb数据库里面所有表名?
2019-04-21
mysql行级锁升级_mysql innodb 行级锁升级
2019-04-21