Question

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

Here's my fiddle

<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;

}

UPDATED FIDDLE

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

1 个答案: