zoukankan      html  css  js  c++  java
  • word-break:break-all; 和 word-wrap:break-word 换行

    word-break:break-all; 和 word-wrap:break-word;两种写法都是让英文句子在父级宽度不够的情况下换行。

    两个属性都同样是让文字换行,但存在着细微的区别,大部分时候刚接触到这两个属性时会无法区别两个的区别

    下面讲一下两者的区别:

     word-wrap:break-word; 作用是强制让文字换行。 一般情况下当父级宽度不够的时候,不管英文单词自动换行是当一整个单词不够放时,整个单词一起换行到下一行,

    看似很合理的写法,但是在有些情况下会出现不可预期的情况。 就是当一个英文单词的长度超过了父级容器长度是,英文单词还是会显示一整个单词而导致超出容器范围。

    还有的情况是,当遇到一个单词很长时,次单词自动换行,也会使上一行空出很多空间浪费了。

    在这种情况下,IE创造出一种新的属性,word-break:break-all; 它强制文字换行无论一句话到达父级容器宽度的时候是不是一整个单词,都会强制换行,使单词断句,

    如果碰上一个单词超出父级容器宽度,会使单词断开并换行。

    兼容性:

    word-break:break-all; 只不兼容opera,其他浏览器都兼容

    word-wrap:break-word;兼容所有浏览器

    两种写法的各有作用,应视情况做出选择!

  • 相关阅读:
    nginx优化配置
    mysql查看变量/配置文件位置
    关于ubuntu的ssh远程登录的问题
    ubuntu镜像下载地址
    百度地图标注地点
    Yii常用方法
    python_将一组数据展示成直方图(以list为例)
    opencv_形态学结构化元素对形态学图像处理的影响
    C语言学习_从VC++6.0开始
    SVM原理(1)
  • 原文地址:https://www.cnblogs.com/keyi/p/9335391.html
Copyright © 2011-2022 走看看