My dilemma involves an HTML input alongside a Font Awesome icon. I'm striving to find a way to avoid restricting the amount of text a user can input while ensuring that the text doesn't overlap with .fa-comment-o. Any surplus text should simply be hidden instead of being cut-off abruptly. An analogy to this scenario is how Google handles text input without overlapping the microphone image or cutting off any excess text (Google employs an image, while I am utilizing a font icon).
<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;
}