精华内容
下载资源
问答
  • 每天一个css word-break word-wrap white-space word-break :用于规定文字自动换行的处理办法。(css3中出的) 可选属性:normal:表示按照浏览器的默认处理方式进行  break-all:允许在单词...

    word-break :用于规定文字自动换行的处理办法。(css3中出的)

    可选属性:normal:表示按照浏览器的默认处理方式进行

           break-all:允许在单词内换行,是超过边界后自动换行

           keep-all:只能在半角空格或连字符处(-)换行

     

    word-wrap:用于处理单词内换行

    可选属性:normal:只在允许允许的断字点处换行

           break-word:在长单词或 URL 地址内部进行换行。注意此换行方式是长单词如果在上一行空间不够时会另起一行,然后如果长度不够再换行。而word-break:break-all是长单词如果在上一行空间不够直接换行

     

    white-space 属性设置如何处理元素内的空白。

    可选属性:

    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

     

     

            

    posted on 2015-09-22 20:52 梦见世界 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lifeisshort/p/4830458.html

    展开全文
  • 在table中加入 style="WORD-WRAP: normal;TABLE-LAYOUT: fixed;word-break:normal" 总结如下.
  • word-break word-wrap

    2017-01-10 15:06:00
    word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前风分隔符之后的内容就换行 转载于:https://www.cnblogs.com/xiaofenguo/p/6269431.html...

    work-break:break-all

    CJK超出的部分自动换行

    word-wrap:break-word

    CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前风分隔符之后的内容就换行

    转载于:https://www.cnblogs.com/xiaofenguo/p/6269431.html

    展开全文
  • 先要明确一点,不加word-wrap或word-break的时候,就是浏览器默认的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去: 变态长,容器放不下,冲出去 2 解决1...

    word-wrap 强调的是是否允许单词内断句,

    word-break强调的则是怎么样来进行单词内的断句。

    1 默认的时候

    先要明确一点,不加word-wrap或word-break的时候,就是浏览器默认的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去:

    变态长,容器放不下,冲出去

    2  解决1 允许单词换行 变态长加word-wrap

    3 解决2 long后边空间浪费   word-break:break-all;

    展开全文
  • 1)word-break 作用:指定如何在单词内断行。 取值: /* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; /* Global values */ word-break: inherit; word-...

    1)word-break

    作用:指定如何在单词内断行。

    取值:

    /* Keyword values */
    word-break: normal; 
    word-break: break-all; 
    word-break: keep-all;
    
    /* Global values */
    word-break: inherit;
    word-break: initial;
    word-break: unset;

    我们一般用的是前三种,默认取值为normal。

    1. normal: 使用默认的断行规则。

    2. break-all: 对于non-CJK (中文/日文/韩文) 文本,可在任意字符间断行。

    3. keep-all: CJK文本中不允许单词换行,要想换行只能在空格或者连字符处换行。非CJK的文本表现行为和normal一致。

    另外,还有一种break-word的用法,这个并没有在标准中列出,在can i use中找到了这个,知道下就行了。相当于设置word-wrap:break-word.

    Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

    例子:

    <p>1. <code>word-break: normal</code></p>
    <p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 
    
    <p>2. <code>word-break: break-all</code></p>
    <p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 
    
    <p>3. <code>word-break: keep-all</code></p>
    <p class="keep narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
    .narrow {
        padding: 5px;
        border: 1px solid;
        width: 8em;
    }
    
    .normal {
        word-break: normal;
    }
    
    .breakAll {
        word-break: break-all;
    }
    
    .keep {
        word-break: keep-all;
    }

    Result:

     

    2)word-wrap

    作用:浏览器是否允许单词中断换行,在CSS3标准中已被更名为overflow-wrap,但是目前IE不支持。

    取值:

    /* Keyword values */
    word-wrap: normal;
    word-wrap: break-word;
    
    /* Global values */
    word-wrap: inherit;
    word-wrap: initial;
    word-wrap: unset;

    一般用前两种,默认值是normal。

    1. normal: 表示在正常的单词结束处换行。

    2. break-word: 如果一行内没有多余的地方容纳单词到结尾,那么如果应用break-word,会将整个不能被分割的单词强制换行,所以会看到有些时候有一些空白的区域。

    例子:

    <p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
    <p class="breakWord">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
    .normal {
      width: 13em;
      background: gold;
    }
    .breakWord {
      width: 13em;
      background: gold;
      overflow-wrap: break-word;
    }

    结果:

    3) white-space:

    作用:规定如何处理空格和回车。

    取值:

    /* Keyword values */
    white-space: normal;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    
    /* Global values */
    white-space: inherit;
    white-space: initial;
    white-space: unset;

    举个例子来看:

    <style>
           
           .test {
            width: 200px;
            border: 1px solid red;
            margin-bottom: 10px;  
           }     
           .normal {
            white-space: normal;
           }
           .pre {
            white-space: pre;
           }
           .pre-wrap {
            white-space: pre-wrap;
           }
           .pre-lie {
            white-space: pre-lie;
           }
           .nowrap {
            white-space: nowrap;
           }
    
     </style>

    HTML:

    <div class="test normal">
            Hi, I am NORMAL. I come from China.
               
               Do you want to make friends with me? Hahaha.
            Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy!
        </div>
        <div class="test pre">
            Hi, I am PRE. I come from China.
               
               Do you want to make friends with me? Hahaha.
            Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy!
        </div>
        <div class="test nowrap">
            Hi, I am NOWARP. I come from China.
               
               Do you want to make friends with me? Hahaha.
            Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy!
        </div>
        <div class="test pre-wrap">
            Hi, I am PRE-WRAP. I come from China.
               Do you want to make friends with me? Hahaha.
            Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy!
        </div>
        <div class="test pre-line">
            Hi, I am PRE-LINE. I come from China.
               Do you want to make friends with me? Hahaha.
            Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy!
        </div>

    结果:

     

    从结果是可以看出来:

    1. normal:合并连续的空白字符和换行符!

    2. pre: 就是在html中写的是什么样,显示出来还是什么样,空白字符不会被合并,换行符也不会合并。

    3. nowrap: 连续的空白符会被合并,但是会忽视文本中的换行符,文本将在同一行显示。

    4. pre-wrap: 连续的空白符,换行符都会进行保留,但是允许折行。

    5. pre-line: 连续的空白符会被合并,换行符会被保留,允许折行。

    下面这张表从MDN上抄过来的。

     

    参考资料:

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

    https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

    https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

     

    转载于:https://www.cnblogs.com/gogolee/p/6383135.html

    展开全文
  • 实现自动换行,用CSS来实现,通常有两种方式: word-break: 取值为 normal, break-all, keep-all word-wrap: 取值为 normal, break-word word-break: break-all 太霸道,无条件折行,会造成 英文单词 和 数字的断行...
  • white-space 用于处理空格、回车 可取值:nowrap、normal nowrap:不会折行 normal:空格忽略,默认值 常用省略号 .classEllipsis{ text-overflow:ellipsis; white-space:normal;...word-...
  • [leetcode]break word II

    2015-01-07 21:43:26
    问题描述: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each word is a valid dictionary word. Return all such possible sentences. For example, given
  • word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长...
  • word-break: break-word;根据空格断词处理,超过换行 word-wrap: break-word;根据空格断词处理,超过换行 word-break: break-all;不根据空格断词处理,超过长度强行换行 word-break,控制单词如何被拆分换行。它...
  • word-wrap:break-wordword-break:break-all的小小比较 个人感觉word-break:break-all;的用法比word-wrap:break-word;要好点, 当然这是出于某些需求而言 word-break:br...
  • word-break:break-all 表示允许在单词内换行word-break:keep-all 表示只能在半角空格或连字符处换行word-wrap:break-wordword-break:break-all这两个定义都有强制断句的功能,两者的区别是:word...
  • word-break:break-allword-wrap:break-word相同之处:都是换行不同:word-wrap :break-word 以单词换行,可能不对齐,会出现空白word-break:break-all 所有都换行,是以div宽度进行换行的,可能会影响单词的完整性...
  • word-break:break-all和word-wrap:break-word的区别: word-break:break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过。 而word-wrap:break-word则带有怜悯之心,如果这一行文字有可以换行的点,如空格...
  • 自动换行 word-break:break-all和word-wrap:break-word word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动...
  • word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于:1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长...
  • Word Break && Word Break II

    千次阅读 2015-08-26 21:39:14
    Word Break && Word Break II Word Break 题目: Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or ...
  • word-wrap:break-word;与word-break:break-all

    千次阅读 2018-03-20 11:06:44
    你真的了解word-wrap和word-break的区别吗?这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是...
  • word-break:break-all和word-wrap:break-word都是能使其容器如baiDIV的内容自动du换行。 它们的bai区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词...
  • 共同点:word-wrap:break-wordword-break:break-all都能把长单词强行断句 不同点:word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句; word-break:...
  • Word Break

    2018-12-07 17:40:13
    Word Break 思路:如果在j处可以被分词,那么在j+1-i处在可以继续分割。 class Solution { public boolean wordBreak(String s, List&lt;String&gt; wordDict) { boolean f[]=new boolean [s.length()+...
  • 目的:主要说明word-break:break-all和word-wrap:break-word的区别 1. word-break:break-all和word-wrap:break-word的相同点:  都能使其容器如DIV的内容自动换行 2. 区别: (1).word-break:break-all...
  • word-break属性:指定非CJK脚本的断行规则。 值描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 word-wrap属性:...
  • 换行之word-break:break-all和word-wrap:break-word 以下是对这两种方法的区别说明: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行, 如果该行末端有个英文单词很长(studying等),它会...
  • word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,037
精华内容 4,014
关键字:

breakword