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-12-20 13:24:58

    瓦片地图生成使用以及原理

    我们都知道地球是圆的，电脑显示器是平的，要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程，这个过程就叫做投影（Projection）。在地球上我们通过经纬度来描述某个位置，而经过投影之后的地图也有自己的坐标系统，本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

  • 2019-12-20 13:27:16

    腾讯地图谷歌和高德地图等自定义地图区别

    腾讯、百度、Google的地图投影均采用Web Mercator 投影坐标系；腾讯与Google的地图瓦片分辨率及切片范围是完全相同的，仅仅是命名规则稍有不同，这就使得同一位置和缩放级别的地图瓦片是完全可以重叠的；而百度地图每个缩放级别分辨率与前两者均不相同，而且地图瓦片的坐标原点做了一定的偏移，导致百度地图与前两者的瓦片是无法重叠的，这是因为百度在GCJ-02的基础上又进行了加密处理，形成了百度独有的BD-09坐标系。

  • 2019-12-22 08:06:48

    如何快速撤销上一次的commit

    在平时工作中使用git难免会提交一些错误的文件到git库里，这时候，撤销吧，怕把正确的文件删除了，不撤销重新改又很麻烦，下面，我就从提交的三个阶段，来讲解如何撤销错误的操作。

  • 2019-12-23 14:54:03

    RPC， REST ，GraphQL区别比较优劣

    其实在使用和学习的过程中，有很多文章都对比过它们的异同，但是大部分文章并没有从一个相对客观的角度来对比，更多是为了突显一个的优点而刻意指出另外一个的缺点。这让我想到一句话，脱离业务情景谈技术就是耍流氓。

  • 2019-12-23 23:38:59

    vue-apollo的多客户端的用法

    vue-apollo的多客户端的用法以及apollo.js的配置 关于如何安装和如何使用，这篇文章就先暂时不介绍了，如果不清楚就看我另一篇关于vue-apollo的用法 在做项目中，有时候后端的接口是按模块功能去划分的，那么请求的地址就会不同，关于vue-apollo的多客户端配置如下