CSS text超过div范围（文字范围与父节点范围不一致）

弄页面经常会遇到div里面有各种div和text的情况，和普通的div不太一样，text有的时候会引发一些不同的问题，导致显示效果的达不到预期。比如text超过div的宽度范围，还有一种就是直接就是错位的状态，你通过开发工具查看的时候，很容易发现父节点和子节点的范围不在一起。第二点混合错位那个是我在开发小程序遇到的，很蛋疼如果你发现有一个莫名其妙的空间没有对应的设置你又找不到原因，你可以考虑一下。

（1）纵向横向超出范围
实际上就是文字超出父节点的宽度，你设置的text没有设置长度，显示的情况如下

纵向超出所在view的范围，原因是字体太大导致纵向超出，限制一下字体大小font-size，显示如下：

横向超出父节点的范围，如果你开发小程序用的是官方推荐的rpx（对应的是我们之前的px，自适应手机移动端界面），你还会发现一个问题有的时候显示正常有的时候不正常（模拟器切换不同的范围或者不同手机），也就是横向超出范围。这时候你可以用overflow: hidden 来解决这个问题，解决的方式就是用了这个属性在某些时候超长就截掉一部分，例子如下图：

（2）div与text之间造成的错位
这种情况还挺有意思的，就是你会发现不知不觉你的div和text在父节点div里面往下面一点点，这个就是你没有限制line-height这个样式，这样你就会发现text和view的顶部不会有一个莫名其妙的空间，可以顶在顶部正常显示。