CSS word

日期:2021-01-20 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

适配 IE 和 FF 的换行 CSS 强烈推荐款式
  最好是的方法是
  word-wrap:break-word; overflow:hidden;
  而并不是
  word-wrap:break-word; word-break:break-all;
  也并不是
 word-wrap:break-word; overflow:auto;
  在 IE 下沒有任何难题,在 FF 下,长串英文会被遮挡住超过的內容。
  word-wrap同word-break的差别
  word-wrap:
  normal  Default. Content exceeds the boundaries of its container.
  break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会开启word-break。
  word-break:
  normal  Default. Allows line breaking within words. 仿佛是只对Asian text起功效。
  break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
  keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
  总结以下:
  word-wrap是操纵换行的。
  应用break-word时,是将强制性换行。汉语沒有任何难题,英文句子也没难题。可是针对长串的英文,就不起功效。
  break-word是操纵是不是断词的。
  normal是默认设置状况,英文单词不被拆卸。
  break-all,是断掉单词。在单词到界限时,下个字母全自动到下1行。关键处理了长串英文的难题。
  keep-all,是指Chinese, Japanese, and Korean持续词。即只用此时,无需word-wrap,汉语就不容易换行了。(英文句子一切正常。)
  ie下:
  应用word-wrap:break-word;全部的都一切正常。
  ff下:
  如这2个都无需的话,汉语不容易担任何难题。英文句子也不容易出难题。可是,长串英文会出难题。
  以便处理长串英文,1般用word-wrap:break-word;word-break:break-all;。可是,此方法会致使,一般的英文句子中的单词会被断掉(ie下也是)。
  现阶段关键的难题存在于 长串英文 和 英文单词被断掉。实际上长串英文便是1个较为长的单词罢了。
  即英文单词应不可该被断掉那?那难题很显著了,明显不可该被断掉了。
  针对长串英文,便是故意的物品,当然无需去管了。可是,也要想些方法,不让它把器皿撑大。
  用:overflow:auto; ie下,长串会全自动折行。ff下,长串会被遮住。
  因此,综上,最好是的方法是word-wrap:break-word;overflow:hidden;而并不是word-wrap:break-word;word-break:break-all;。
  word-wrap:break-word;overflow:auto;在ie下沒有任何难题。在ff下,长串会被遮挡住一部分內容。
  另,检测编码以下:
  1.htm
  <style>
  .c1{ width:300px;  border:1px solid red}
  .c2{ width:300px;word-wrap:break-word;  border:1px solid yellow}
  .c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
  .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
  .c5{ width:300px;word-break:break-all;  border:1px solid black}
  .c6{ width:300px;word-break:keep-all;  border:1px solid red}
  .c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
  </style>
  .c1{ width:300px;  border:1px solid red}
  <div class="c1">asdasd
</div>
  <div class=c1>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c1>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c1>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
  <div class="c2">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c2>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c2>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c2>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
  <div class="c3">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c3>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c3>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c3>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
  <div class="c4">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c4>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c4>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c4>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c5{ width:300px;word-break:break-all;  border:1px solid black}
  <div class="c5">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c5>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c5>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c5>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c6{ width:300px;word-break:keep-all;  border:1px solid red}
  <div class="c6">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c6>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c6>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c6>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
  <br>
  .c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
  <div class="c7">
  safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
  </div>
  <div class=c7>
  This is all English. This is all English. This is all English.
  </div>
  <div class=c7>
  都是汉语的状况。都是汉语的状况。都是汉语的状况。
  </div>
  <div class=c7>
  中英文混排的状况。Chinese and English. 中英文混排的状况。Chinese and English.
  </div>
上一篇:再次了解1下网页页面规范 返回下一篇:没有了