确定文本框的字体并使 contenteditable 看起来与文本框相同

Question

我无法使网站上的 contenteditable 看起来像文本框。有谁知道图片上的字体是什么 - 我已经尝试了很多 none 匹配得很好。

contenteditable 在上面，textarea 在下面..我想知道这是什么字体？

这也是代码

#mw {
   -moz-appearance: textfield-multiline;
    padding: 11px; 

}

.mw1 {
    padding: 11px; 

}

<div id="mw" contenteditable>I am not really sure what this font is and I am trying to make a contenteditable area look like a text area. 

Thanks for the help.
</div>

<textarea id="aid" name="inputText" class="mw1">I am not really sure what this font is and I am trying to make a contenteditable area look like a text area. 

Thanks for the help.</textarea>

Answer 1

在尝试匹配字体和颜色时仍然遇到问题？有关详细信息，请参阅此代码段。

片段

.textBox { font: 400 13px/1.428 'Courier New'; color: rgba(0,0,0,1); }
#textarea {
   -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    padding: 5px; 
    border-radius: 4px;
    border: 2px solid #ddd; 
    padding: 4;
   overflow: hidden; overflow-y: auto;
    height: 100px;
    background-color: #FFFFFF; 
   resize: both;
    overflow: auto;
    width:300px;
    height: 100px;
    font: inherit;
    color: inherit;
}

.maintextarea {
    padding: 5px; 
    border-radius: 4px;
    border:solid 2px #ddd;
    background-color: #FFFFFF;  
    width:300px;
    height: 100px;
    font: inherit;
    color:inherit;
}

<section class="textBox">
<div id="textarea" contenteditable>
  In this demo, I have wrapped a &lt;section&gt; element around both boxes. It has a class name of .textBox.
  This is the CSS:
  .textBox { 
      font: 400 16px/1.428 'Courier New'; 
      color: rgba(57,64,68,1); 
  }
</div>

<textarea id="firsttextarea" name="inputText" cols="100" rows="20" class="maintextarea">
  Now for the 2 editors #textarea and .maintextarea we add the following CSS to both of them:
    font: inherit;
    color:inherit;
  </textarea>
  </section>

Answer 2

我认为字体是 Consolas。但至于让 div 看起来像一个文本区域，你可以尝试

<table bgcolor=buttonshadow cellpadding=3 cellspacing=3>
  <tr>
    <td bgcolor=buttonhighlight>

      <div id="mw" style="
        font:consolas;
        width:400px;
        height:200px;
        overflow-y:scroll;
       overflow-x:hidden;" contenteditable>
       I am not really sure what this font is and I am trying to make a contenteditable area look like a text area. 

       Thanks for the help.
      </div>
    </td>
  </tr>
</table>

只需将宽度和/或高度调整为您喜欢的方式即可。

只要您没有没有 space 的超长字符串片段（即超链接），这就可以工作。如果你这样做那么超长的单词可能会被截断

您可以通过更改

来补救

overflow-x:hidden;

至

overflow-x:auto;

但如果需要的话，这会添加一个水平滚动条。或者，您可以在长字的某处添加一个“-”和一个 space 以将其分隔为两行或更多行

确定文本框的字体并使 contenteditable 看起来与文本框相同

Determine font of textbox and make contenteditable look the same as textbox

html

css

stylesheet

contenteditable

片段