CSS单词换行

CSS单词换行时不折断

CSS单词换行的时候，通常情况下会尝试在单词之间进行换行，但是有些情况下我们希望单词不被折断。这个时候我们可以使用CSS中的white-space属性。该属性有3个值可以使用：

• normal：默认值，单词会被折断。
• nowrap：单词不会被折断。
• pre：保留空格和换行符，不进行任何处理。

  

  
   
This is a very long sentence that should not be broken

  

CSS换行导致空白太多怎么解决

有时候CSS中的换行会导致过多的空白，在排版上会显得不太美观。我们可以使用word-wrap属性来解决这个问题。该属性有2个值可以使用：

• normal：默认值，按照预设的方式排版，可能会出现过多的空白。
• break-word：在单词之间折断，可以有效控制空白。

  

  
   
This is a very long sentence that should be broken if necessary, but should not have too much whitespace.

  

CSS英文单词换行

在CSS中，中文和英文的单词换行存在着不同的规则。英文单词换行时，会在单词之间进行，如果有多个空格则会根据宽度的限制进行折断。但是在有些情况下我们并不满意这种排版，那么可以使用word-break属性来对英文单词进行处理。该属性有3个值可以使用：

• normal：默认值，按照预设的方式排版。
• break-all：单词之间都可以折断，适用于英文排版。
• keep-all：单词之间不折断，适用于中文排版。

  

  
   
This is a very long sentence that should be broken if necessary, without considering the spaces between words.

  

CSS英文单词换行不截断

如果我们希望英文单词换行不进行截断，可以使用overflow-wrap属性。该属性有2个值可以使用：

• normal：默认值，按照预设的方式排版。
• break-word：在单词之间折断，可以保证单词不会被截断。

  

  
   
This is a very long sentence that should be broken if necessary, but words should not be truncated.

  

CSS单词换行分开了怎么办

如果CSS单词换行分开了，我们可以在单词之间添加一个连字符，这样可以保证单词不会被分开。我们可以使用CSS中的hyphens属性来实现这个功能，该属性有3个值可以使用：

• none：默认值，不添加连字符。
• manaul：手动添加连字符，需要在单词中添加­实现。
• auto：自动添加连字符，现代浏览器支持。

  

  
   
This is a very long sentence that should be hyphenated if necessary, without breaking words apart.

  

Css 换行

如果我们希望在CSS中进行换行，通常情况下我们会添加\n或者\r\n实现。但是在CSS中，我们需要使用content属性来实现。

  

  
   
如果我们希望在CSS中进行换行，可以使用content属性，同时添加attr()函数来获取HTML元素中的属性值。以下是一个例子：
  
   

    blockquote:before {

    content: attr(data-quote) " - ";

    white-space: pre-wrap;

    }
  
  
   
This is a quote that should be on a new line