内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

CSS中最全的换行处理方式

2018-05-14 11:22 出处:清屏网 人气: 评论(0

在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理的方式展示。

比如下图的一种效果,在Web中是很常见的:

由于URL文本过长,已经超出容器的宽度,影响了整个视觉效果,甚至很多时候还会影响Web页面的布局效果。

最暴力的做法就是在容器上添加 overflow:hidden; ,可以阻止文字(或其他任何东西)溢出容器。虽然这可以解决视觉上的效果,但它使文本变得不可访问。在一些使用鼠标的桌面浏览器中,你可能可以连续三次单击该行来选择URL并复制它,但是你不能指望每个人都知道,或者在所有场景中都有可能这么做。

溢出流在这里也是自确的,因为这就是正在发生的事情。我们使用 overflow:auto 同样可以处理溢出流,它会触发一个水平滚动条。或许有的场景使用这种方案是合适的,但我想这不是一个普遍接受的解决方案。

接下来我们来看看怎么将长文本换行,看看有哪些解决方式,或者更适合的方式。

实验场

我的想法是,要有一个可调整的内容面板,加上各种CSS属性和值,你可以在上面进行切换,以查看对应的内容效果。

我确信这不是全面的或是最完美的。这只是我所知道的一些属性

在上面的示例中,你可以尝试着选择每个属性,得到对应的效果:

 

word-break: break-all

允许单词在任何地方被打破(这里所说的打破是强行折断换行)。 word-break 属性可以“解决”这个问题:

p {
    word-break: break-all;
}

@fantasi 电子交流过,她解释说,这主要是因为单词分割生新定义一个词是什么。 break-all 值本质上将非CJK视为CJK,它可以在任何地方(除了句号和括号外)断开。 keep-all 是反向的,将CJK作为非CJK处理。

CJK:中日韩统一表意文字(CJK Unified Ideographs),目的是要把分别来自中文、日文、韩文、越文中,本质、意义相同、形状一样或稍异的表意文字(主要为汉字,但也有仿汉字如日本国字、韩国独有汉字、越南的喃字)于ISO 10646及Unicode标准内赋予相同编码 —— 维基百科

overflow-wrap: break-word

对于我们已经列出的问题, overflow-wrap 特性似乎是最有效的解决方案:

p {
    word-wrap: break-word; /* old name */
    overflow-wrap: break-word;
}

乍一看,它看起来很像 word-break: break-all 。在上面的演示中,仔细观察URL,又并不像 word-break:break-all 一样,把单词 pen 打破 pe\n ,真正的效果是在 pen 单词末尾折断换行。这样的处理方式是我们更期待的一种。

@fantasai是这样解释的:

如果一个单词不能中断,因此它会溢出,那么它可以在任何地方断开,以避免溢出。

hyphens:auto

hyphens 属性做了你可能会想到的事情,比如断字中添加断线( - )。连字符有时可以在URL和长单词中使用,但不能保证。举个例子,一个很长的数字会把它绊倒。此外,连字符会影响所有文字,更随意地打破文字,以帮助文本均匀地贴在右边。

p {
    hyphens: auto;
}

@fantasai告诉我:

如果一个单词横跨在一行的末尾,我们可以使用连字符将它们连接起来了。

我想单词(“word”)可以帮助你解决这个问题。有些问题是长字符串不是“单词”,所以不能指望它来解决所有的溢出问题。

line-break: anywhere

还有一个属性叫做 line-break 。很明显,这主要是为了标点符号,但我似乎无法在任何浏览器中看到它。@fantasai告诉我,将会有一个新的属性值 anywhere

"like word-break: break-all; except it actually breaks everything like a dumb terminal client"。

总结

这篇文章主要简单的介绍了CSS中几个处理超常文本溢出容器的处理方式。比如说,单词被打破折断换还;还是整个单词在容器边缘整体换行;或者说单词打破,但打破处添加连接符 - 。虽然文章中提到过的几个属性能解决我们常见的场景,但对于一些特殊的场景还是要特殊考虑,尤其是长字符(特别是恶意长字符),上面的CSS属性估计都无法能解决。

扩展阅读


分享给小伙伴们:
本文标签: CSS

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号