CSS中最全的换行处理方式
在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理的方式展示。
比如下图的一种效果,在Web中是很常见的:
由于URL文本过长,已经超出容器的宽度,影响了整个视觉效果,甚至很多时候还会影响Web页面的布局效果。
最暴力的做法就是在容器上添加overflow:hidden;,可以阻止文字(或其他任何东西)溢出容器。虽然这可以解决视觉上的效果,但它使文本变得不可访问。在一些使用鼠标的桌面浏览器中,你可能可以连续三次单击该行来选择URL并复制它,但是你不能指望每个人都知道,或者在所有场景中都有可能这么做。
溢出流在这里也是自确的,因为这就是正在发生的事情。我们使用overflow:auto同样可以处理溢出流,它会触发一个水平滚动条。或许有的场景使用这种方案是合适的,但我想这不是一个普遍接受的解决方案。
接下来我们来看看怎么将长文本换行,看看有哪些解决方式,或者更适合的方式。
解决方法:
接下来让我们详细讲解几个技巧:
word-break: break-all
允许单词在任何地方被打破(这里所说的打破是强行折断换行)。word-break属性可以“解决”这个问题:著作权归作者所有。
overflow-wrap: break-word
乍一看,它看起来很像word-break: break-all。在上面的演示中,仔细观察URL,又并不像word-break:break-all一样,把单词pen打破pe\n,真正的效果是在pen单词末尾折断换行。这样的处理方式是我们更期待的一种。著作权归作者所有。
如果一个单词不能中断,因此它会溢出,那么它可以在任何地方断开,以避免溢出。
hyphens:auto
hyphens属性做了你可能会想到的事情,比如断字中添加断线(-)。连字符有时可以在URL和长单词中使用,但不能保证。举个例子,一个很长的数字会把它绊倒。此外,连字符会影响所有文字,更随意地打破文字,以帮助文本均匀地贴在右边。
如果一个单词横跨在一行的末尾,我们可以使用连字符将它们连接起来了。
line-break: anywhere
还有一个属性叫做line-break
。很明显,这主要是为了标点符号,但我似乎无法在任何浏览器中看到它。
总结:这篇文章主要简单的介绍了CSS中几个处理超常文本溢出容器的处理方式。比如说,单词被打破折断换还;还是整个单词在容器边缘整体换行;或者说单词打破,但打破处添加连接符-。虽然文章中提到过的几个属性能解决我们常见的场景,但对于一些特殊的场景还是要特殊考虑,尤其是长字符(特别是恶意长字符),上面的CSS属性估计都无法能解决。
CSS中最全的换行处理方式相关推荐
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
- css中实现三角形的几种方式
前言 写了几个小特效的代码,发现对于用纯css实现非常规的图形这个小技能,还是有点云里雾里的,所以以三角形为例,特此记录一下. 实现方式 实现方式目前为止,我知道的有6种,欢迎补充. HTML代码 & ...
- HTML+CSS中常见的几种居中方式
前言 在HTML+CSS网页制作开发中经常使用居中操作,实现方式更是多种多样,为了方便大家学习,文章将为大家介绍几种最常见的水平居中方式以及水平+垂直居中方式,比较适合初学者使用. 一.水平居中 方法 ...
- CSS中z-index全解析
一.z-index解释 z-index属性决定了一个HTML元素的层叠级别,元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的z-index值意味着这个元素在叠层顺序中会更靠近 ...
- css中怎么代码可以换行吗,css强制换行代码怎么写?
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,确实挺让人头疼的,下面就来介绍下CSS如何实现换行的方法. 强制不换行 div{ white-space:nowrap; ...
- CSS中常用的几种定位方式
定位的基本语法: position:方式 top: 多少px; right: 多少px; left: 多少px; bottom: 多少px; 有常用的几种方式,如下: 第一种:相对定位 relativ ...
- easyui中调用textbox实现换行的方式
1.$('#tb').textbox({ multiline : true, 设置multiline : true, 2.修改easyui.css文件: .textbox .textbox-text ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法 发布时间:2020-06-15 10:53:11 来源:亿速云 阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
最新文章
- activemq ObjectMessage 不鼓励使用,有安全隐患
- 5G将如何推动未来十年智能城市的发展
- 利用SMTP收发邮件
- Flex 中取得当前服务IP地址
- python环境变量配置_?Python项目读取配置的正确姿势
- 软考(5)--软件工程
- 桌面支持--电脑出现临时账户--解决办法
- oracle exp imp
- Oracle数据表中输入引号等特殊字符
- 远程桌面最新漏洞CVE-2019-0708 POC利用复现
- java死锁的产生原因,操作系统产生死锁的原因和处理策略
- 在XP下,如何使指定的用户在登录界面可见
- T3及报税软件报表使用无线打印机打印凭证没反应
- 【定量分析、量化金融与统计学】R语言MANOVA多元方差分析
- 纳韦斯托克斯方程的推导_纳维-斯托克斯方程的来源
- 语义分割-FCNs in the wild: Pixel-level adversarial and constraint-based adaptation 对抗方法实现不同数据集语义分割
- 安装新操作系统需要注意的问题
- linux格式化卡死,在Linux中格式化SD卡失败
- 论文所涉及公司简介是否需要查重?
- 防火墙与入侵检测系统
热门文章
- cad怎么在线看图?在线渠道一览
- 什么是跨域,怎么解决跨域?
- kali linux桌面分辨率,kali自定义分辨率(1920*1080)
- 6.0 三星S7相机权限问题
- Pycharm ”Cannot Run Git “等一系列Git问题解决方法
- Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
- iOS开发,利用PanoramaGL生成360度全景预览图,附选择本地全景图片并生成全景预览...
- 关于引体向上器和腰垫的选购说明
- 小白都能看懂的UOS测试链安装教程
- Android 扫描蓝牙设备并获取设备类型