html的空格显示距离问题

一、使用全角空格

全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。

二、使用空格的替代符号

替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示。

空格的替代符号有以下几种:

名称 编号 描述
    不断行的空白(1个字符宽度)
  半个空白(1个字符宽度)
  一个空白(2个字符宽度)
  窄空白(小于1个字符宽度)

可以用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不能省略。

如: 欢  迎  光  临!

显示效果为:欢  迎  光  临!

注意,如果文本中有英文单词,则空白会加在字母之间,而不是单词之间。

三、使用CSS的 text-indent 属性

CSS的text-indent属性用于设置首行缩进,它的取值可以是一个带单位的长度值,浏览器会在段落的首行开始处设置指定长度的空白。比如:

<div style="text-indent:2em">欢迎光临!</div>

说明:em 是一个相对长度单位,2em 表示要缩进两个字的距离。

四、html 中的空格现象

    <style type="text/css">
        .blankOne {
            border: 1px solid red;
            font-family:"宋体";
            /*font-family:Arial;*/
            /*font-family: "simsun";*/
            /*font-family: ‘Microsoft YaHei‘;*/
            font-size: 20px;
        }
    </style>
    <span class="blankOne">  </span>
    <span class="blankOne">&nbsp;</span>
    <span class="blankOne" style="margin-left:10px;">宋</span>

五. contenteditable=‘true’ 的 div编辑空格现象

    <style type="text/css">
        .blankOne {
            border: 1px solid red;
            font-family: "宋体";
            font-size: 20px;
        }
    </style>

    <!--
        contenteditable=true 可可编辑内容的空格宽度问题
        火狐浏览器:都是半个中文字符宽度
        Google浏览器:第一个空格是&nbsp  第二个空格是半个中文字符
        IE浏览器下:都是半个空格
    -->
    <div class="blankOne" contenteditable="true"></div>
    

时间: 2024-10-31 13:37:31

html的空格显示距离问题的相关文章

空格&amp;nbsp在不同浏览器中显示距离不一致问题解决方法

  在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman,宋体是字符等宽的字体,但Times New  Roman不是字符等宽的字体,因为浏览器默认字体的不同,空格符 在不同的浏览器下面的显示宽度也不同. 例如以下代码分别以IE和chrome进行测试 [html] view plaincopy <table> &l

空格&amp;amp;nbsp在不同浏览器中显示距离不一致问题解决方法

  在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体.一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman,宋体是字符等宽的字体,但Times New  Roman不是字符等宽的字体,由于浏览器默认字体的不同.空格符 在不同的浏览器以下的显示宽度也不同. 比如以下代码分别以IE和chrome进行測试 <table> <tr> <td>我是第

MATLAB检查指定路径中的子文件夹中的文件名中是否带有空格

测试文件夹为: clear;close all;clc; %% %程序实现的功能 %检查指定路径中的子文件夹中的文件名中是否带有空格,并去掉文件名中的空格 %% %程序中用到的之前不清楚的函数如下 %1)strfind(a,b):即找a中是否有b,如果a中有b,则输出b的位置序号.没有输出空数组 %2)isempty(a):判断数组是否为空 %3)strrep(a,b,c):就是把a中所有出现的b换为c %4)movefile(a,b):a移动为b,如C:\test1.jpg移动为C\test2

去除MathType内联公式后自动生成的空格

使用MathType公式编辑器在Microsoft Word 2016 中输入的内联公式后会自动产生一个空格,每次都需要手动删除.以下是解决办法,不再需要每次输入公式以后都要点键盘上的backspace去删空格. 1. 打开注册表: 开始-运行-regedit 2. 找到 HKEY_CURRENT_USER\Software\Design Science\DSMT6\WordCommands\ 3. 在该目录里增加字符串NoSpaceAfterInline,并将值设置为1. 退出注册表,运行of

2016/1/12 第一题 输出 i 出现次数 第二题 用for循环和if条件句去除字符串中空格 第三题不用endwith 实现尾端字符查询

1 import java.util.Scanner; 2 3 4 public class Number { 5 6 private static Object i; 7 8 /* 9 *第一题 mingrikejijavabu中字符“i” 出现了几次,并将结果输出*/ 10 public static void main(String[] args) { 11 12 String r ="imingrikejijavabi"; 13 14 15 //第一种 截取 16 int a=

空格替换

字符串替换空格:请实现一个函数,把字符串中的每个空格替换成"%20".例如输入"we are happy.",则输出"we%20are%20happy.". #include <stdio.h> #include <assert.h> void replace_black(char *str) { assert(str); int black = 0; int oldlen = strlen(str); int newle

shell if判断(曾经被一个字符串相等的判断纠结半小时,最后只是if后少了个空格!) 和 awk引用外部变量判断

一.if判断 数字: $A=12 $B=15 if(("$A"<"$B")) if(("$A"=="$B")) 字符串: $A="HELLO" $B="WORLD" if [ "$A" = "FACT_LOGIN_USER" ] if [ "$A" = "$B" ] PS:字符串比较的时候注意 'if'

Python删除空格字符串两端的空格

我们经常在处理字符串时遇到有很多空格的问题,一个一个的去手动删除不是我们程序员应该做的事情,今天这篇技巧的文章玩蛇网就来给大家讲一下,如果用Python去除字符串两边的空格.我们先创建一个左右都有N个空格的字符串变量,看代码: >>> s = " iplaypython " >>> 去除字符串空格,在Python里面有它的内置方法,不需要我们自己去造轮子了.lstrip这个字符串方法,会删除字符串s开始位置前的空格. >>> s.l

空格&lt;&amp;nbsp;&gt;、水平横线&lt;hr/&gt;、地址&lt;address&gt;和&lt;code&gt;标签

空格:   水平横线: </hr> 地址: 一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签.也可以定义一个地址(比如电子邮件地址).签名或者文档的作者身份. <address>标签间的字体默认为斜体: 例如: <address>本文的作者:<a href="mailto:[email protected]">lilian</a> <code&