html - 将文本区域设置为内容的精确宽度

标签 html css

所以我正在做一个元素,我想在屏幕中间有一个文本区域,但有一个左对齐的占位符。我需要 textarea 的宽度与占位符的宽度相同,以便文本看起来实际上居中。

有没有办法根据字符数设置textarea的宽度,这样无论加载什么字体,textarea的宽度都会调整。现在我只是使用 vw 来设置字体大小和文本区域宽度,但是当在具有不同系统字体的不同计算机上加载站点时,它不是一个完全可靠的解决方案。

这是元素的当前工作版本:https://beta.fontspark.app

最佳答案

您可以获得占位符的长度并使用 div cols 相应地设置 with。当占位符不适合时,您可能需要减去几个列。但它应该可以完成工作。

$( function() {
    var taPlaceholder = $('textarea[placeholder]');
    taPlaceholder.attr('cols', taPlaceholder.attr('placeholder').length);
});
textarea {
    font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="This is random placeholder"></textarea>

关于html - 将文本区域设置为内容的精确宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53282297/

相关文章:

css - 编写 HTML 时如何从 css 文件中调用.something #content

JavaScript 自动提交表单

javascript - CSS Transitions 有时会滞后

CSS 中间对齐图像右侧的两个跨度

javascript - 在没有 <head> 标签的情况下将 CSS 应用于整个页面?

html - 将搜索栏移动到导航栏的右侧

html - 如何在 float div 上设置动态宽度?

javascript - 在聊天框中自动滚动 javascript 函数

javascript - document.write javascript 函数不起作用

javascript - 为什么 jQuery 可以在服务器上计算宽度,但在本地运行时却不能?