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-11-29 13:47:22

    百度地图做电子围栏总结

    在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2019-11-29 13:50:29

    图片连接处出现白线

    block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失,我琢磨半天,各种尝试,发现把图片高度减少(增加)1px就解决了。因为我们的项目是用postcss-px-to-viewport,我每张图片都是设置高度的,应该是数值转换出现偏差。

  • 2019-11-29 13:54:07

    粗略计算多边形中心点(并不是很准确,但简单好用)

    也是再做栅栏系统,搜索如何获取多边形中心点的问题上,发现了这个,简单易于理解,但是并不是特变准确,但也不影响使用。 后来发现了新的算法,并且百度地图也提供相应的api。 具体内容我写在了前面的文章,大家可以找一下。

  • 2019-11-29 14:20:38

    vue,vuthis.$parent算法

    由于组件嵌套,其实vue parent的位置也改变了,我们可以通过下面的图片,来看一下,parent到底什么哪一层

  • 2019-11-29 14:23:24

    百度地图 多个标记点设置最佳视角

    通过下面的语法,我们可以为不规则图形,以及过大的图形进行地图适配,更好的展示我们画的图形,当然,如果展示所有的图形,我们可以暴力的把所有的点组合起来进行展示,点过多不知道会不会影响性能,不过我们也可以从后台精简点数,不过地球是圆的,不知道好不好做。

  • 2019-12-01 08:00:16

    PHP中的HTTP_HOST和SERVER_NAME有什么区别

    多域名指向同一个php服务器,用nginx做代理,获取SERVER_NAME都是第一个域名,这就尴尬了,至今不明白咋回事,最后用HTTP_HOST解决都,这个暂时倒是准确。

  • 2019-12-01 08:04:30

    laravel多路由配置,也可以做根据域名都动态路由

    在用laravel 框架开发大型应用的时候,由于 laravel 默认是只有一个路由文件,如果把项目所有模块的路由放在一个路由文件下,那么该路由文件就显得很臃肿,以至于后期难以维护,解决方案是根据不同模块配置不同路由文件。