CSS如何设置不换行

小蓝 • 2024-11-29 08:11 • 编程

在CSS中，可以通过white-space属性来解决不想要文字换行的问题。white-space属性是指定如何处理元素中的空格、换行符和制表符等空白字符。常见的属性值有normal、nowrap、pre、pre-wrap和pre-line。

1、normal：默认值，浏览器会忽略不必要的空格和换行符，只保留一个空格。

.example-normal {
  white-space: normal;
}

2、nowrap：元素中的内容不会换行，除非在遇到br标签或换行符时，或者用CSS强制换行。

.example-nowrap {
  white-space: nowrap;
}

3、pre：元素中的空格、换行符和制表符会被完全保留，文本将按照其原始格式进行显示。

.example-pre {
  white-space: pre;
}

4、pre-wrap：元素中的空格、换行符和制表符会被完全保留，而当内容太长时，文本将自动换行。

.example-pre-wrap {
  white-space: pre-wrap;
}

5、pre-line：元素中的空格、换行符和制表符会被压缩成一个空格，而跨行换行符会起作用。

.example-pre-line {
  white-space: pre-line;
}

word-break和word-wrap属性用来控制文本超出容器时的断行方式。

1、word-break：设置如何断行单词或汉字。通常默认值为normal，不允许单词或汉字换行，而break-all可以强制将单词或汉字断开换行。

.example-word-break {
  word-break: break-all;
}

2、word-wrap：当一个单词太长时，该属性用来控制是否允许换行。normal不允许单词换行，而break-word可以强制断行。

.example-word-wrap {
  word-wrap: break-word;
}

overflow-wrap属性被用来控制长单词和 URL 是否允许被断开换行。

1、normal：单词不会断开换行。

.example-overflow-normal {
  overflow-wrap: normal;
}

2、break-word：单词会断开换行。

.example-overflow-break-word {
  overflow-wrap: break-word;
}

text-overflow属性被用来控制当文本溢出容器时的截断方式。常见的属性值有clip、ellipsis和string。

1、clip：文本溢出时隐藏

.example-text-overflow-clip {
  text-overflow: clip;
}

2、ellipsis：文本溢出时显示省略号

.example-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3、string：文本溢出时显示指定的字符串

.example-text-overflow-string {
  overflow: hidden;
  text-overflow: '&lt;...&gt;';
  white-space: nowrap;
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/189705.html