p标签中的文本换行显示空白

2020-01-13 11:14:43

参考文章

属性介绍

white-space: 如何处理元素中的空白

  • normal: 默认, 被浏览器忽略空白

  • pre: 空白被浏览器保留.

  • nowrap: 文本不会换行, 会在同一行上继续, 一直走到需要换行为止

  • pre-wrap: 保留空白符序列, 但正常换行

  • pre-line: 合并空白符序列, 但正常换行

  • inherit: 从父元素继承white-space这个属性

word-wrap: 是否允许浏览器在单词内断句

  • 现在更名为了overflow-wrap

  • normal: 默认, 只在允许的断字点换行

  • break-word: 在实在找不到换行点的时候, 就断单词换行

word-break: 怎样进行单词内的断句

  • noraml: 默认, 使用浏览器的换行规则

  • break-all: 允许在 (非中日文等, 也就是英语什么的) 单词内换行

  • keep-all: 只能在半角空格和连字符换行

p标签操作的各种方式

  • 强制不换行: p { white-space:nowrap; }

  • 自动换行: p { word-wrap:break-word; }

  • 强制英文单词断行: p { word-break:break-all; }

  • 超出显示省略号: p{text-overflow:ellipsis;overflow:hidden;}

word-break:break-all和word-wrap:break-word的区别

  • 这是张鑫旭大神的图, 文章链接在上面

  • 这是鑫大神的图


  • 精彩推荐

  • 2019-10-14 21:18:57

    Comparable 的 使用

    要做这个呢，我们也是用到了Arrays.sort 这个排序的方法！但不同的是，我们之前用的是int数组，现在我们用的是这个UserBean数组。如果你想对这个UserBean数组进行排序，你要多做一件事，就是让这个 UserBean类去 实现Comparable 的接口，并重写 里面  comparaTo 的方法。注意，这个接口是可以提供泛型的 ———————————————— 版权声明：本文为CSDN博主「sdn_bt496」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明

  • 2019-10-15 05:53:20

    xUtils 里的DbUtils使用心得

    使用xUtils做Android数据库开发非常简便和得心应手，而且它本身还支持很多查询功能，比如一对多，select count和自定义sql查询等,并且支持事务（默认关闭） 下面是官方sample给的代码和我的一些使用心得 首先是两个实体类，对应两张表，这两张表中有一对多的关系