Question

我有以下HTML代码来制作textarea（它使用的是一类Microsoft UI Fabric，但它不是很重要）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Title</title>  
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <link href="Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    <link href="Common.css" rel="stylesheet" type="text/css" />
    <script src="Notification.js" type="text/javascript"></script>
    <script src="Home.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
    <div id="content-main">
    <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
        <textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
            ABCDEFGHIJKLMNOP
            abcdefghijklmnop        
        </textarea>
    </div>
    </div>
    </div>
</body>
</html>

结果如下：

正如我们所看到的，与stackoverflow的问题编辑器不同，我的textarea中每个字符的宽度都不相同。在没有css的普通html中，有没有人知道如何创建一个文本区域，使得每个字符的宽度始终相同？如果我仍想使用Microsoft UI Fabric的css，我应该在哪里进行修改？

Answer 1

您可以替换该行：

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">

使用

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px; font-family: monospace;">

如果您想指定特定的等宽字体，可以在单词monospace之前添加

<textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px; font-family: 'DejaVu Sans Mono', monospace;">

从技术上讲，这是使用内联 css。

Answer 2

问题是fabric.components.css有这个：

.ms-TextField.ms-TextField--multiline .ms-TextField-field {
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

因此，要么修改HTML类以防止选择器选择textarea，要么在选择器中以更具特异性的方式设置默认font-familiy: monospace。

@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css';
@import 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css';
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
  font-family: monospace;
}

<div id="content-main">
  <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
      <textarea class="ms-TextField-field" id="my" spellcheck=false style="font-size: 18px">
        ABCDEFGHIJKLMNOP
        abcdefghijklmnop        
      </textarea>
    </div>
  </div>
</div>

Answer 3

（编辑 - 混淆了monospace和monotype）只需为该文本字段使用等宽字体。在等宽字体中，所有字符都具有相同的宽度：

#my {
  font-family; monospace;
}

创建一个textarea，每个字符的宽度始终相同

3 个答案: