首页 » 网站建设 »

网页上空格的宽度

2017年9月29日 / 16次阅读
CSS

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

由于发现云上小悟网页上的一个空格( )的宽度只有一个英文字符的一半宽,于是把网页上字体的宽度问题研究了一下。

如果你发现网页上的空格,并不是你预期的跟一个英文字符一样宽,比如只有英文字符一半宽,这就是字体的问题,是你用的字体不是等宽字体(mono space font)。如果你在意这个问题,你多半是个程序员。

使用非等宽字体也没什么大问题,比如使用麦新杰喜爱的微软雅黑。但是如果你想在网页上显示源代码,你就发现不行了。如果空格的宽度不够,换行后的4个空格看起来只有2个,很难受的。所以,至少网页源代码部分要使用等宽字体。

 

如果你也跟我一样,使用<pre>+<code>在网页上显示代码,你最好对你的<pre>元素设定如下CSS:

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace, serif;
    font-size: 1em;
}

高亮这一行使用的字体,就是等宽字体,确保<pre>里面的空格(&nbsp;)与字母一样宽。

至此,完美解决网页上普通空格显示宽度的问题。

关于网页上的空格的显示和宽度,还可以继续阅读:HTML的空格实体

本文链接:http://www.maixj.net/wz/wangye-kongge-kuan-16581
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

栏目

支付宝红包.每天领一次.

支付宝扫码领红包

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top