absolute元素宽度与子元素的宽度的问题？

Question

demo在这https://jsfiddle.net/ot7drLy3/
p标签设置padding：0 5%；为什么文字就会换行？
5%是按照父类的宽度的百分比来计算的，
而父类是由子元素p的宽度撑起的。
到底谁先算的？（p是先拿到父类的5%，然后把父类撑起呢，还是相反？）
如果我设置p为white-sqpce：nowrap；虽然可以不换行，但是文字就会出父类的容器？该如何解决呢？

Answer 1

你都已经用例子证明了是先撑起再padding了。

---

• 你为啥不给p一个定宽呢。或者写个js然后动态给p增加

• p {

          background: red;
          width: calc(100% + (5px) * 2);
           padding: 0 5%; 
          box-sizing:border-box;
      }

Answer 2

从你的代码来看，我理解的是文字换行和absolute关系不大。

1. 设置padding以后.d4的宽度每行存放文字字数就不能够放你目前的字数，所以文字换行；

2. 设置强制不换行white-space:nowrap;（注意你的打错了，不是white-sqpce）文字自然会超出父类宽度的，解决办法有两种：一是拓宽父元素的宽度（你的代码就是减少padding占的宽度）；二是减小文字大小已达到容器多宽存放特定大小文字多少个字数，这样才合理。