如何使文本与图标不重叠？

Question

我有一个HTML输入和一个字体真棒图标.我不想限制用户输入的文本量.相反,我想这样做,以便文本不重叠.fa-comment-o ...任何额外的文本将被隐藏(不是截止,只是隐藏).我可以给出的最好的例子是当你在谷歌中输入一些东西时,文本不会与麦克风重叠,如果关闭它们也不会切割(它们使用图像而我使用的是字体图标).

这是我的小提琴

<div id="container">
    <input id="input"  value="This is some really long text that will almost certainly not fit within the text box. What I'd like to do is not bleed beyond the comment icon."/>
    <i class="fa fa-comment-o"></i>
</div>


#input{
    width: 300px;
    height: 25px;
    margin-right: -30px;

}

.fa-comment-o{
  font-size: 16px;
  color: #333;
  cursor: pointer;
  right: 10px;

}

Answer 1

对代码进行以下更改padding-right:30px当您增加padding宽度时,请注意.

#input{
    width: 270px;
    height: 25px;
    margin-right: -30px;
    padding-right:30px;

}

更新后的