I want to display the url of the post in each post so visitors can easy share the URL. This means that the width of the input field in which the url is placed should be relative to the width of the URL.
Is it possible to make the width of an input field relative to the content (the text that is in the value=””) of that input filed?
So the width of the input field must always be the same as the text that is in the field.
<input readonly="" type="text" onClick="this.select();" value="http://www.website.com/category/sub-category/the-post-title.html" />
input{
padding: 5px 10px;
margin: 5px;
text-decoration: none;
border: 1px solid #000;
width:auto;
}
For example, I’ve created a jsfiddle: http://jsfiddle.net/GB35J/
In that fiddle, you will see that the input field is to small and the whole content of that input field is not shown. When I use width: auto;, the width is to small, but when I use width:100%;, the width of the input field is way to big.
If you can detect with an event each time the user types a character in the text field, then you can make a function that takes as a parameter the lenght of the text, and call it every time a character is typed, so it will resize accordingly the text field.