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的区别

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

  • 这是鑫大神的图


  • 精彩推荐

  • 2020-03-18 21:30:57

    基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

    前言.因为项目有点特殊，需要接入谷歌地图实现地理围栏，因为谷歌地图的地理围栏接口相关接口并不完善，于是就换了一个思路，利用OpenLayers来实现地理围栏 openlayers 中文地址 http://weilin.me/ol3-primer/ch02/index.html 作者：zcty0701 链接：https://www.jianshu.com/p/60e88ee1e843 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  • 2020-03-19 17:12:40

    百度地图放大覆盖物消失

    产生问题的原因是因为我们用的普通的点数组生成的多边形，我们应该用百度的点数组生成就没问题了。

  • 2020-03-19 19:15:47

    vue中methods watch和compute的区别和联系

    首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样，所以我接下来的介绍主要有两个对比： 1.methods和(watch/computed)的对比

  • 2020-03-19 19:50:31

    用vue做的跟随鼠标移动的div

    随鼠标移动的动画效果，之前一直使用angular和react，没怎么接触过vue，先做一个vue的简单例子，然后再整合。

  • 2020-03-20 13:35:55

    随便想到，群聊天的数据库简单设计

    拆分成两个表，一个是消息的流水表，一个是每个人的配置表。 记录每个群下面的这个用户的最后读取的消息last_msg_id，然后在计算消息未读数据。 这样优化之后数据将减少好多，数量是 m+n条数据。不在是成倍增长了。

  • 2020-03-20 13:39:50

    类似与微信朋友圈功能数据库如何实现

    每次发圈子的时候，给关注我的每个uuid，发一个内容id。 大概表的设计就是 uuid，idlist 这样的，idlist是按照时间顺序的。 然后定期删除idlist过多的老圈子。

  • 2020-03-21 00:11:38

    Android卡片布局（圆角阴影）的几种实现及分析

    在开发中，为了界面美观，圆角view和阴影效果是开发中经常遇到的UI场景，比如银行卡效果，卡片式itemView布局，Banner图等，开发中我们通过各种方式实现了这种效果，但是哪种方案最好呢，接下来本文将比较几种常见的圆角阴影布局实现，并从内存占用角度分析它们的优缺点.