html – 创建一个textarea,其中每个字符的宽度始终相同

html – 创建一个textarea,其中每个字符的宽度始终相同,第1张

概述我有以下 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 我有以下 HTML代码来制作textarea(它使用一类Microsoft UI Fabric,但它不是很重要).

@H_419_11@<!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 > <div ID="content-main"> <div > <div > <textarea ID="my" spellcheck=false > ABCDEFGHIJKLMnop abcdefghijklmnop </textarea> </div> </div> </div></body></HTML>

结果如下:

正如我们所看到的,与stackoverflow的问题编辑器不同,我的textarea中每个字符宽度都不相同.在没有CSS的普通HTML中,有没有人知道如何制作一个文本区域,使得每个字符内部的宽度始终相同?如果我仍想使用Microsoft UI Fabric的CSS,我应该在哪里进行修改?

解决方法 问题是fabric.components.CSS有这个:

@H_419_11@.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设置为更具特异性.

@H_419_11@@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;} @H_419_11@<div ID="content-main"> <div > <div > <textarea ID="my" spellcheck=false > ABCDEFGHIJKLMnop abcdefghijklmnop </textarea> </div> </div></div> 总结

以上是内存溢出为你收集整理的html – 创建一个textarea,其中每个字符的宽度始终相同全部内容,希望文章能够帮你解决html – 创建一个textarea,其中每个字符的宽度始终相同所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1070637.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存