CSS 使用 Twitter Bootstrap 时如何在 textarea 等宽字体中制作文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14455080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:24:33  来源:igfitidea点击:

How do I make the text in a textarea monospace when using Twitter Bootstrap?

csstwitter-bootstrap

提问by smithy

I have the following textareaelement:

我有以下textarea元素:

<form action="/checkit" method="get">
    <textarea class="field span8" id="textarea" name="user_input" 
        rows="20">{{default_data}}</textarea>

    <input type="submit" value="Checker">
</form>

I have just started using bootstrap, but can't work out the best way to make the text in the textarea monospace.

我刚刚开始使用bootstrap,但无法找出在 textarea 等宽字体中制作文本的最佳方法。

回答by Jess

Adding the following to your textarea tag should work

将以下内容添加到您的 textarea 标签应该可以工作

 style="font-family:monospace;"

or else you can just add it to your css like this

否则你可以像这样将它添加到你的css中

#textarea{font-family:monospace;}

回答by Jukka K. Korpela

Twitter Bootstrap sets many styling features, and it is not always trivial to override them. For a specific element, though, it is easy when using a fairly specific selector like an id selector. In your case, the textareaelement has id="textarea", so you can use e.g.

Twitter Bootstrap 设置了许多样式功能,覆盖它们并不总是微不足道的。但是,对于特定元素,使用相当特定的选择器(如 id 选择器)时很容易。在您的情况下,该textarea元素具有id="textarea",因此您可以使用例如

<style>
#textarea { font-family: Consolas, Lucida Console, monospace; }
</style>

You can list any sequence of monospace fonts in order of preference, but make the last entry monospace(without quotations marks) last, because it means falling back to the browser's default monospace font.

您可以按偏好顺序列出任何等宽字体序列,但将最后一个条目monospace(不带引号)放在最后,因为这意味着回退到浏览器的默认等宽字体。

It is normally not good for usability to set font to monospace in textarea, unless perhaps the expected input is computer code, rows of numbers, or other text that is suitable for monospace rendering.

在 中将字体设置为等宽通常不利于可用性textarea,除非预期的输入可能是计算机代码、数字行或其他适合等宽渲染的文本。

回答by Bryan Lewis

In bootstrap we have styles:

在引导程序中,我们有样式:

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In your css you need to change this into:

在您的 css 中,您需要将其更改为:

#textarea { 
font-family: monospace; 
}

So with id your textarea will have higher priority.

因此,使用 id 您的 textarea 将具有更高的优先级。