码迷,mamicode.com
首页 > Web开发 > 详细

CSS 2 文本③

时间:2018-07-11 21:26:00      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:break   line   pac   tabs   inf   info   nes   保留   常用   

技术分享图片  定义的文本 

      |

      |  想要这段文本

技术分享图片 ——按照这样的格式技术分享图片展现出来  但是事与愿违  

                                                                      |

                                                                      |

                                                     但他是这样呈现的           | 

                                      技术分享图片

                                      它最后变成了单行 没有按照我们想要的格式去展现 那我们可以通过white-space 属性来修改

    white - space

    white - space : normal | nowrap | pre | pre-wrap | pre-line

    normal : 由浏览器决定的

        技术分享图片pre - wrap 平常用的比较多

      New Lines : 换行 

      Spaces and Tabs : 连续的空格和连续的tab  或者 空格tab空格tab    

      Text  Wrapping : 自动换行

      Collapse : 合并成一个空格 

      wrap : 会自动换行      

      No wrap : 不会自动换行 ,强制一行 ,那一行写不下了就会超出去 

      Preserve : 保留

      

  技术分享图片

  解析:我们发现一个单词非常长 不会自动换行 我们希望它是这样子的

  技术分享图片

  这个单词我们不管有多长都希望它会自动换行 我们可以用 word - wrap

  word  - wrap :单词换行

  word - wrap : normal | break - word  | break - all

  normal : 正常的 

  break - word :  自动换行

  技术分享图片  

  但是我们发现一些问题   右上角留出空白来了 从视觉效果来是不符合我们预期的 那我们就要用到 break-all

  技术分享图片

  

  

CSS 2 文本③

标签:break   line   pac   tabs   inf   info   nes   保留   常用   

原文地址:https://www.cnblogs.com/hzaixt/p/9296608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!