• 技术文章 >web前端 >css教程

    CSS控制文字换行、裁剪

    高洛峰高洛峰2017-02-28 14:08:27原创677
    关于换行、裁剪的一些CSS属性

    word-wrap: normal | break-word

    normal 正常换行,内容可以撑破容器,例如长单词或者长数字的情况
    break-word 以单词作为换行依据,如果需要,单词内部允许断行

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

    normal 正常换行,内容可以撑破容器,例如长单词或者长数字的情况

    break-all 以字母作为换行依据

    keep-all 中英文下和normal相同

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

    normal默认值,空白会被浏览器忽略

    pre 空白会被浏览器保留,其行为方式类似 HTML 中的 <pre> 标签

    nowrap 文本不会换行,文本会在在同一行上,直到遇到 <br /> 标签为止

    pre-wrap 保留空白符序列,但是正常地进行换行(IE7-不支持)

    pre-line 合并空白符序列,但保留换行符(IE7-不支持)

    inherit规定应该从父元素继承 white-space 属性的值(IE不支持)

    应用:

    文字溢出显示省略标记(...):

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    文字换行:

    /* 以单词作为换行依据 */
    word-wrap: break-word;
    word-break: normal;
    /* 以字母作为换行依据 */
    word-break: break-all;

    文字强制不换行:

    white-space: nowrap;

    以上所述是小编给大家介绍的CSS控制文字换行、裁剪,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

    更多CSS控制文字换行、裁剪相关文章请关注PHP中文网!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 换行 裁剪
    上一篇:css中的margin属性 下一篇:使用 after 伪类清除浮动
    大前端线上培训班

    相关文章推荐

    • 浅析Scss基础语法和导入SASS文件的方法• normalize和css reset分别是什么文件?又有什么区别?• CSS+JS实现爱心点赞按钮(代码示例)• 聊聊css为什么需要模块化?怎么进行模块化?• css调用方法是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网