html - 父 div 内的 div 与文本重叠

Question

这是我的代码

.pa {
  width: 400px;
  background: #008000;
  position: relative;
}

.icon-wrap {
  height: 100%;
  float: right;
  width: 30px;
  background: yellow;
  padding: 5px;
  position: absolute;
  top: 0px;
  right: 0px;
}

<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

Fiddle Example

如您所见，黄色的 div 与父 div 的文本重叠。
我只想将文本换行以防止重叠。
我该如何解决？

更新说明:
添加 padding-right:30px 有效，但是 ...
有什么方法可以解决仅更改 .icon-wrap 类的问题吗？

Answer 1

尝试根据您的要求提供 padding-right，重叠问题将得到解决。

.pa
{
  padding-right:30px;
}