博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS换行不换行
阅读量:6327 次
发布时间:2019-06-22

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

段落文字不超出几行,超出部分以省略号显示
一、div内显示一行,超出部分用省略号显示
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
二、div内显示两行或三行,超出部分用省略号显示
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(行数)-webkit-box-orient: vertical;
概述

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

强制换行符号(br)换行
可以使用标签p来实现大换行,如果在一个文章里需要分段换行形式。
使用CSS设置宽度自动换行
连续数字或者字母换行word-wrap:break-word ;

转载于:https://www.cnblogs.com/xunmucao/p/10019837.html

你可能感兴趣的文章
陕西将建“五大中心” 推进“一带一路”建设
查看>>
浅谈Hex编码算法
查看>>
COMUUU让音乐回归:人人都可玩转音乐,更在音乐中找寻知音
查看>>
未来智能+峰会(eSmart)深度分享抢先看
查看>>
浅谈TabLayout(ViewPager+Tab联动)
查看>>
深入浅出Java垃圾回收机制
查看>>
关山难越,互联网造车前景并没有那么美好
查看>>
苹果计划在美组装计算机:面向数据中心
查看>>
Redis常用的一些功能
查看>>
SNMP:简单网络管理协议
查看>>
Effective C++笔记简易总结以及程序演示
查看>>
论windows系统的安全性(中篇)
查看>>
店招模块终于可以进行后台换图片了
查看>>
Webpack 入门教程2
查看>>
JAVA入门[1]--安装JDK
查看>>
del rd命令行下删除文件不需要确认
查看>>
lesson10-QT二维图形绘制
查看>>
AI+AR,百度的如意算盘能够打得响吗?
查看>>
【Linux】好玩的Linux命令(二)
查看>>
class_exists函数
查看>>