zoukankan      html  css  js  c++  java
  • CSS换行知识

    换行规则

    CSS可以指定文字多行时换行的规则,说白了就是指定哪些地方可以换行

    相关属性

    word-break

    The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

    word-break属性决定了文本溢出时内容区的文本换行方式

    属性值

    关键值

    normal(默认值)

    m2cA4e.png

    break-all

    允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行

    看起来就是超出部分直接截断,无论单词是否完整

    m2c34g.png

    keep-all

    不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致

    m2c0ET.png

    break-world(被废弃)

    word-break

    属性值

    关键值

    normal(默认值)

    break-word

    表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

    word-break:break-all和word-wrap:break-word的区别

    word-break: break-all 在任意溢出都换行,word-wrap:break-word 如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心

    m24uRO.png

    总结

    目前单词断行没有那么受重视,可以直接使用word-break:break-all 达到断行不留空白的效果,更多应用,后续遇到会添加

  • 相关阅读:
    题解-CmdOI2019 口头禅
    题解-NOI2003 智破连环阵
    题解-CF1282E The Cake Is a Lie
    CF1288F Red-Blue Graph
    题解-洛谷P4229 某位歌姬的故事
    莫比乌斯反演
    [HNOI2008]越狱(bzoj1008)(组合数学+正难则反)
    [FJOI2007]轮状病毒(bzoj1002)(递推+高精度)
    矩阵快速幂
    高斯消元
  • 原文地址:https://www.cnblogs.com/sefaultment/p/11442737.html
Copyright © 2011-2022 走看看