• 关于换行 wordbreak wordwrap 的理解


    word-break: normal; // 此值为浏览器的默认属性:以单词为单位;  keep-all 这个值由于兼容性差,很少用;

    word-wrap: normal; // 此值为浏览器的默认属性:以单词为单位;

    纯中文:自动换行,一个汉字看做一个单词;

    纯英文或纯数字:看做一个单词,不换行;

    遇到英文空格或者换行符:会换行;

    遇到英文单词和英文空格:在空格处换行且不会断单词;

    word-break: break-all; // 此值表示 单词也要换行,都要换行;

    纯中文:自动换行,一个汉字看做一个单词;

    纯英文或纯数字:直接把单词截断换行;

    遇到英文空格或者换行符:会换行;

    遇到英文单词和英文空格:在空格处换行截断单词;

    word-wrap: break-word; // 此值表示 纯单词超过长度会截断换行,其他的单词不会;

    纯中文:自动换行,一个汉字看做一个单词;

    纯英文或纯数字:直接把单词截断换行;

    遇到英文空格或者换行符:会换行;

    遇到英文单词和英文空格:在空格处换行不截断单词;

    换行范围:

    word-break: break-all; > word-wrap: break-word; > word-break: normal; word-wrap: normal; 

    总结:

    1:浏览器默认是以单词为单位进行换行的,单词不可拆分,挤不下会另起一行;一个汉字为一个单词;

    2:word-break: break-all 此值表示 超出的时候都要换行,是单词要拆分;

    3:word-wrap: break-word 此值表示 如果一个单词超出行长度,要截取换行,其他默认;

    4:word-break: normal; word-wrap:normal 此值表示 浏览器的默认行为,也就是第 1 点;

  • 相关阅读:
    Java 处理 multipart/mixed 请求
    SpringBoot 动态更新 resources 目录的文件
    dubbo 2.7.0 中缺乏 <dubbo:annotation /> 的解决方案
    设计模式 — 终章.
    代理模式
    状态模式.
    第七节、双目视觉之空间坐标计算
    第六节、双目视觉之相机标定
    经典项目博客集合
    第五节、轮廓检测、直线和圆、多边形检测
  • 原文地址:https://www.cnblogs.com/pengxiangchong/p/16020398.html
Copyright © 2020-2023  润新知