css white-space属性

white-space属性

自动换行：自动换行会尽量保持文本不向右溢出，当一行放不下才会换行。

属性	属性值	是否换行保留回车空格
white-space	nomal（默认值）	自动换行	多个空格回车变成1个空格,换行处变成1个回车
white-space	nowrap	不换行	不保留回车、多个空格回车变成1个空格
white-space	pre	回车换行	保留回车、空格
white-space	pre-wrap	自动换行	保留回车和空格、换行处空格会变成回车
white-space	pre-line	自动换行	保留回车、多个空格变成1个空格，换行处变成1个回车
white-space	inherit	继承父元素white-space属性的值

text-align:justify;文本作用

white-space:normal

自动换行

注：为了显示效果p标签设置了宽高和红色边框

p{
      width:500px;
      height: 200px;
      border: solid 1px red;
 }

英文文本

   多个空格和回车会变成一个空格，所以下面文本添加了多个空格和回车，正常英文文本就是由这些空格和回车组成的，所以我下面的文本也是正常英文文本

 <p>
        Lorem, ipsum dolor
        
        
             sit amet consectetur         adipisicing.
 </p>

  结果显示

  多个空格变成一个回车，只有换行处才会变成回车其它的都是上面那种情况
  还有多个空格和回车变成一个回车，这个就不做举例了

<p>
     Lorems, iipsum dolor sit amet consectetur adipisicing it do.Lorem      ipsum dolor sit.
</p>

  上面p标签文本假如排在一行上会这样

  结果显示

  英文文本是以空格回车作为一个单词分割标志的，自动换行时并不会拆开单词。自动换行时会判断文本中的单词在一行中是否放得下，放不下的单词将把单词前面的空格变成回车进行换行

  比如以下文本

<p>
   Lorem ipsum dolor sit amet consectetur. Repudiandaequibusdamquidem
</p>

  上面p标签文本假如排在一行上会这样

  自动换行把过长单词前面的空格变成回车，换行

  还有以下代码

<p>
    Loremipsumdolorsitametconsectetur.widthheightRepudiandaequibusdamquidem
</p>

  因为没空格回车，自动换行时故以为此文本为一个单词，所以就没法换行，这样的话文本就会溢出

  文本溢出的部分如果有多个空格，自动换行会把溢出部分的最前面一个空格变成回车换行，其他的被忽略

 <p>
      Loremipsumdolorsitametconsectetur.widthheightRepudiandaequibusdam    q u i
      dem
 </p>

  所以把m后面的空格变成回车，换行

中文文本

  中文文本不会出现文本向右溢出的情况，因为每个汉字处都能自动换行

  为举例自动换行可能在每个汉字处换行，以下举例文本是中英文文本

<p>
   你Loremipsumdolorsitametconsectetur.widthheightRepudiandaequibusdam    q u i
   dem
</p>

  "你"字后面和一连串没有空格回车的英文文本，无法在第一行上并列，所以自动换行在"你"字处换行，如果条件允许每个汉字处都能自动换行，和英文文本不同的是，它并不需要空格和回车才能换行

  再举例

 <p>
        你Loremipsumdolorsitametconsectetur.好widthheightRepudiandaequibusdam    q u i
       dem
    </p>

  显示结果

  还有一点需再次说明，默认值下（white-space:normal;）汉字永远不会向元素右边溢出

总结

   1.自动换行会尽量保持文本不向右溢出，其有可能把文本中某一个空格变成回车（换行符），也有可能在某个汉字处换行，来保持文本不向右溢出。
   2.只有没有空格回车的英文文本其长度超出了元素宽度才会向右溢出。

注意

  以下为当无法并列一行时能自动换行的符号，英文符号为英文输入法下键盘上敲出的符号，中文符号为中文输入法下键盘上敲出的符号。

  英文符号能换行的有：? -
  中文符号能换行的有：，》。、？；：、】——-）……！

white-space:nowrap;

不换行

  不会换行，文本多长都只是在一行上，文本长度超过元素宽度就会溢出。文本中多个空格回车处只保留一个空格


  

剩下属性值不做过多解释

text-align:justify;文本作用

  css 代码

p{
      width:500px;
      height: 100px;
      border: solid 1px red;
      text-align: justify;
 }

  1.文本未能占满一行，justify不会有作用

<p>Lorem ipsum dolor adipisicing elit.</p>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>

  显示结果

  2.只有两行及以上才会有效果，一般情况下效果甚微

<p>Lorem ipsum dolor adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum expedita.</p>
<p>君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。</p>

  css中不添加 text-align:justify;看效果
  显示结果

  css添加 text-align:justify;之后，右边的小空隙被占满

  只有一行上只有几个字的效果才明显

<p>Lorem ipsum dolor adipisicing. Lorem,ipsumdolorsitametconsecteturadipisicingelit.Ipsum expedita.</p>
<p>君不见，黄河之水天上来 Lorem,ipsumdolorsitametconsecteturadipisicingelit.Ipsum expedita.</p>

  css中不添加 text-align:justify;看效果

  css添加 text-align:justify;之后，效果明显

总结

   文本未能占满一行justify不会有效果，只有两行及以上才会有效果，一行上字少的效果才明显