css - 使输入字段的宽度相对于其内容

标签 css wordpress url input

我想在每个帖子中显示帖子的 URL,以便访问者可以轻松共享 URL。这意味着放置 url 的输入字段的宽度应该相对于 URL 的宽度。

是否可以使输入字段的宽度相对于该输入字段的内容(value=""中的文本)?

因此输入字段的宽度必须始终与字段中的文本相同。

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

例如,我创建了一个 jsfiddle:http://jsfiddle.net/GB35J/ 在那个 fiddle 中,您会看到输入字段太小并且没有显示该输入字段的全部内容。当我使用 width: auto; 时,宽度很小,但是当我使用 width:100%; 时,输入字段的宽度却很大。

最佳答案

如果每次用户在文本字段中键入一个字符时都可以检测事件,那么您可以制作一个函数,将文本的长度作为参数,并在每次键入字符时调用它,所以它将相应地调整文本字段的大小。

关于css - 使输入字段的宽度相对于其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21509641/

相关文章:

javascript - 无法选择文本,无法单击 &lt;input&gt;

javascript - 使用 gruntjs 的自定义脚本和 css 版本控制最佳实践和自动化

php - 基于购物车的 WooCommerce 登录重定向

javascript - 使用 Javascript 获取 URL 参数

ruby-on-rails - 前缀或 URL 的一部分

html - 如何在 Wordpress 中定位 DIV

css - 为什么 <hr> 不换行?

html - 在适用于 HTML 的 CSS 中创建一个新类 您无权访问

html - 出现在 wordpress 主页上的网站黑客行

html - 根据部分 url 为 div 加载新的 css 样式