• word-wrap word-break white-space 用法。


    一、word-wrap使用:

    语法:

       word-wrap : normal | break-word
    

    取值说明:

    1、normal和break-word,其中normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器);

    2、break-word将内容在边界内换行(不截断英文单词换行,截断英文单词换行需要使用word-break:all属性),我们先来看两个简单的实例:

    二、word-break使用:

    上面我们使用word-wrap:break-word只能在内容中换行,而不能实现词内换行,前面提到过如果需要词内换行,我们需要使用word-break属性,下面我们就一起来看看这个属性:

    语法:

       word-break:normal | break-all | keep-all

    取值说明

    1、normal为默认值,如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;

    2、break-all:可以强行截断英文单词,达到词内换行效果

    3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示

    当以上word-wrap:break-word放在<pre>和<table>标签中时,在Firefox和Opera下是不会换行的,

    三、white-space属性:

    white-space语法

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

    取值说明

    1、normal:为其默认值。空白处会被浏览器忽略,往往可以通过设置这个值恢复到默认值下
    2、pre:空白处会被浏览器保留,其行为方式就类似于HTML中的<pre>标签
    3、nowrap:文本不会换行,文本会在同一行上,直到碰到了换行标签<br />为止,
    4、pre-line:合并空白符序列,但保留换行符,此属性不支持IE7.0-,Firefox30-,Opera9.2-下以版本浏览器
    5、pre-wrap:保留空白符序列,但是正常进行换行,此属性值不支技IE70-,Firefox3.0-版本浏览器,
    6、inherit:规定应该从父元素继承white-space属性的值,此属性值在所有的IE版本都不支持

    另外一点就是word-wrap和break-word直接应用在table中是没有效果的,为了解决这个bug,只能在table中加上下面的属性:

       table {
          table-layout: fixed;
          width: 100px;/*设置表格宽度*/
       }
    

    一、pre标签自动换行:

      pre{
        white-space: pre;           /* CSS 2.0 */
        white-space: pre-wrap;      /* CSS 2.1 */
        white-space: pre-line;      /* CSS 3.0 */
        white-space: -pre-wrap;     /* Opera 4-6 */
        white-space: -o-pre-wrap;   /* Opera 7 */
        white-space: -moz-pre-wrap !important; /* Mozilla */
        white-space: -hp-pre-wrap;  /* HP Printers */
        word-wrap: break-word;      /* IE 5+ */
     }
    

    二、td标签自动换行

     table {
       table-layout: fixed;
       width: *** px;
     }
          
     table td {
       overflow: hidden;
       word-wrap: break-word;
     }
    

    三、除pre,td标签外其他标签自动换行:

      element {
        overflow: hidden;
        word-wrap: break-word;
      }  
    

    有人说使用下面这样的写法

       element {
          word-wrap: break-word;
          break-word: break-all;
       }
    

    四、标签内容强制不换行:

       element {
          white-space: nowrap;
          word-break: keep-all;
       }
    


  • 相关阅读:
    蒟蒻の搜索学习总结
    蒟蒻の红黑树总结
    数据结构与算法
    linux常用命令
    Linux防火墙Firewall和Iptables的使用
    Spring Boot 自定义Intercepter
    Spring Boot 自定义Filter
    SpringBoot 全局异常配置
    SpringBoot设置支持跨域请求
    springboot整合shiro安全框架
  • 原文地址:https://www.cnblogs.com/sunrise/p/3480199.html
Copyright © 2020-2023  润新知