chrome最小字体大小 12px
在所有现代浏览器中,其默认的字体大小就是 16px 。

text-transform

  • none:默认
  • capitalize:文本中的每个单词以大写字母开头

image.png

  • lowercase:无大写字母,仅有小写字母

image.png

  • uppercase:无小写字母,仅有大写字母

image.png

  • inherit:从父元素继承 text-transform 属性的值。

文本换行

CSS 提供的一些和文本换行相关的属性:

  • overflow-wrap
  • word-break
  • white-space
  • line-break
  • hyphens

    overflow-wrap

    overflow-wrap 用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否运训这样的单词中断换行。其属性值有以下三种:

  • normal

  • anywhere
  • break-word

    normal

    使浏览器使用系统的默认换行行为。因此,对于英语和其他相关书写系统,换行符将出现在空格和连字符处。
    1658673060849.png

    anywhere

    使用值 anywhere 将在字符串之间的任意点来进行中断,仅当在其行上显示单词会导致溢出时,浏览器才会中断该单词。如果单词放在其行上时仍然溢出,它将在发生溢出的点处中断该单词。
    1658673331605.png
    该属性会影响其所在元素的 min-content 属性大小计算。当 width 设置为 min-content 时很容易看出来
    1658673427621.png
    注意,这种行为只有为文本所在容器的宽度设置为 min-content 时才会发挥作用,如果宽度设置为固定的值,那么 anywhere 和 break-word 的表现是一致的。
    使用这个属性的时候要注意兼容性问题。

    break-word

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

    word-break

    word-break 属性用于指定怎样在单词内进行断行。我们可以使用该属性在内容发生溢出的确切位置拆分单词并将其换行到下一行。它的属性值有:

  • normal

  • break-all
  • keep-all
  • break-word(已被弃用)

    normal

    应用默认的断行规则。
    1658673060849.png

    break-all

    当属性值为 break-all 时,对于 non-CJK(CJK指中文/日文/韩文)的文本,可在任意字符间断行。
    1658674076232.png
    使用 break-all 将在英语和其他相关语言系统中发生溢出的确切位置在两个字符之间断开一个单词。但是,它不会对中文、日文和韩文文本应用相同的行为。因为 CJK 书写系统有自己的应用断点规则。

    keep-all

    如果使用 keep-all ,即使内容溢出,浏览器也不会将分词应用于 CJK 文本。
    image.png

    white-space

    white-space 属性是用来设置如何处理元素中的空白。其属性如下:

  • normal

  • nowrap
  • pre
  • pre-wrap
  • pre-line

    nowrap

    防止文本自动换行。
    image.png

    pre

    文本之间的空白会被浏览器保留。其行为方式类似 HTML 中的
    1. 标签。
    2. line-break

      line-break 属性可以用来处理如何断开带有标点符号的中文、日文或韩文本本的行。简而言之,该属性可以用来处理过长的标点符号。
    3. anywhere

      使长标点符号进行换行。
      image.png
    4. hyphens

      hyphens 属性告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。其断字规则由语言决定,因此需要告诉浏览器使用哪种语言。这是通过在 HTML 中指定 lang 属性来完成的。
    5. auto

      hyphens 设置为 auto 时,浏览器可以自由地在适当的断字点自动断词。