面试题
文字换行有什么办法?

文字换行有什么办法?

  • 使用word-wrap属性,可以控制文本的换行方式。
    • normal: 只在合适的时候换行,不会在单词内部换行,如果一个单词长度超出了容器长度,单词将超出边界;
    • break-word: 比容器长的单词将在单词内部换行;
  • word-break属性关注单词内的换行方式,一般在设置word-wrap: break-word时使用,它有以下几种取值:
    • normal: 默认属性值,不允许在单词中间截断。
    • break-all: 表示都全部单词内换行,即便这个单词并没有长得超出了边界。处理中文则不会生效。
    • keep-all: 指CJK(中/日、韩)文本超出区域不断行,但会在标点出折行。
  • white-space是用来控制文本中空格和换行的属性。
    • normal:默认属性值,表示文本中连续多个空格换行都会被合并为一个空格;
    • nowrap:表示文本不会被自动换行;
    • pre:表示文本中连续多个空格换行都会被保留,不会自动换行。
    • pre-wrap:表示文本中连续多个空格换行会被保留,超出容器宽度时,会发生换行。
    • pre-line:表示文本中连续多个空格会被合并成一个空格,但是换行会被保留,会自动换行。

如果文字不换行,可以用text-overflow:ellipsis;显示省略符号来代表被修剪的文本。