`
陈同兵
  • 浏览: 11678 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

浏览器中两个空格宽度不等于一个汉字宽度的问题

    博客分类:
  • jsp
阅读更多

        此文章为转载文章,原地址为:http://www.javaranger.com/archives/130

        最近碰到一个奇葩问题,我的一个textarea,在它里面,一个汉字占了4个字节,或者说一个汉字占了4个空格,想尽了一切办法都没用,后来在一位网友的博客里面看到说是字体系列的问题。参照他的,在textarea的style里面设置字体系列:font-family: “宋体”, sans-serif;就没问题了。前面那个宋体是字体,可以改成隶书等,后面那个才是才是系列。

       空格在浏览器中所占宽度跟字符集或者编码是没有关系的。

      在英文字体或者其他国家语言字体下空格($nbsp;)在浏览器中显示为不同的宽度,可能是三个空格对应一个汉字,或者四个空格对应一个汉字。
      使用中文字体可以解决这个问题。
      设置字体为中文即可:font-family: “宋体”, sans-serif;
分享到:
评论

相关推荐

    CSS实现段落首行缩进两个字符不再使用空格

    对于大多数字体来说,一个汉字的宽度大约等于一个英文字符的宽度,所以2em相当于两个汉字的宽度。这种方法的优点在于它与字体大小和浏览器的兼容性无关,能够确保在各种环境下保持一致的缩进效果。 需要注意的是,`...

    CSS解决浏览器的等宽空格问题

    很多时候,希望能够在 HTML 中使用... 宽度是已设定字符的空格宽度(Safari 的默认字体为 Times),也就是说一个中文字符需要两个占位符。 具体情况如下图所示: 其实,这不是 Safari 的问题,而是字体的问题。解决的

    如何在HTML中插入空格.docx

    例如,我们在两个词之间按一个空格键,实际上在浏览器中可能只显示一个空格: ```html 这是一个例子 这是另一个例子 ``` 结果在网页上展示出来,两个词之间只会有一个空格的距离。这导致在需要更宽的空间时,单纯...

    空格&nbsp在ie、firefox、chrome浏览器中显示距离不一致

    `的宽度大约等于一个汉字的宽度,而在IE中,需要四个` `才能达到相同的宽度。这是因为IE中的宋体将每个` `视为等宽的,而Chrome中的Times New Roman则根据字符本身宽度来确定空格大小。 解决这个问题有...

    空格 在ie与在firefox下长度不一样问题

    在进行网页设计和排版的过程中,我们会遇到在不同浏览器下空格长度不一致的问题,特别是针对Internet Explorer(IE)和Mozilla Firefox这两个广泛使用的浏览器。这一现象主要是因为各浏览器对等宽字体和不等宽字体的...

    DIV 文字可以换行但是纯数字和字母不可以换行解决方案

    这里使用了`word-wrap`和`word-break`两个CSS属性来解决问题: 1. **`word-wrap: break-word;`**:此属性允许长单词或URL地址在到达边界时自动换行,而不是将它们挤出容器边界。 2. **`word-break: break-all;`**:...

    45个Dreamweaver常见问题整理(一)

    `,这个实体代表非破坏性空格,可以在任何地方插入一个空格。此外,还可以通过调整文本颜色与背景色相同,创建视觉上的空格,但这种方法可能在某些浏览器中显示不一致。 其次,我们讨论如何在浏览器地址栏前添加...

    使用CSS代码的空格实现中文对齐的方法

    这两个实体分别代表了一个半角空格(1/2个中文宽度)和一个全角空格(1个中文宽度)。由于它们具有透明和宽度的特性,使得它们非常适合用于文本对齐的场景。 2. 使用CSS伪元素和空白字符 CSS伪元素`::before`和`::...

    浅谈HTML代码中的空格和空行

    HTML代码中的所有连续空格或换行,在浏览器中渲染时只显示为一个空格。这意味着,不管是连续输入的空格还是多个连续的空行,其结果在页面上显示出来的都只有一个空格。这是因为HTML的解析器会忽略多余的空白字符,...

    探讨HTML不同空格的特性与表现形式(推荐)

    在HTML模板中,空格常用于分隔文字,但普通的半角空格(英文输入法下的空格)在连续输入时,浏览器只会显示一个空格的宽度。为了实现特定的排版效果,我们需要了解并运用不同类型的空格。 首先,不换行空格(` `)...

    纯数字或者字母不换行解决方法

    例如,在一个固定宽度的表格单元格中显示较长的连续数字时,如果这些数字不能正确换行,则可能导致表格布局混乱。 #### 二、CSS 解决方案 为了解决纯数字或字母串不换行的问题,可以通过设置特定的CSS属性来实现...

    css 自动换行 强制换行属性 (firefox+ie)

    本文将详细讲解CSS中的两个关键属性:`word-wrap` 和 `word-break`,它们可以帮助我们解决自动换行和强制换行的问题。 首先,我们来看`word-wrap`属性。这个属性主要用于控制当一个单词或内容过长,超出了其容器的...

    div中英文无法自动换行的解决办法

    标题和描述中提到的问题是,在一个有限宽度的`div`内,中文文本会根据宽度自动换行,但英文文本则不会。这是因为浏览器遵循W3C的CSS规范,对于英文文本,浏览器会保持英文单词的完整性,即使单词的长度超过了容器的...

    CSS解决无空格的字母、数字过长不自动换行的问题

    从【描述】部分了解到,本知识点的讲解是针对无空格字母、数字过长不自动换行的问题,使用CSS中的word-break属性设置为"break-all",即可实现上述要求。 在【部分内容】部分给出了一个具体的代码示例: ```html ;">...

    小学信息技术五年级下册网页PPT教案.pptx

    在HTML中,连续的空格并不会被浏览器分开显示,而是会被合并为一个空格。这一特性对于希望在段落开头实现空两格缩进效果的学生来说,是一个挑战。在中文环境下,一个有效的解决方法是将输入法切换到“全角”模式,...

    使用text-align:justify实现两端对齐一例

    然而,Opera浏览器则不会在中文文本中增加额外的空格来实现对齐,这可能会导致在某些情况下,文本对齐的效果并不理想。Safari浏览器在处理中文文本时的策略与Opera相似,也倾向于不通过增加空格来实现对齐。 相比之...

    html内容超出了div的宽度如何换行让内容自动换行

    此属性有两个主要值: - normal:单词不会被拆分,若单词长度超过容器宽度,将在容器内显示不完全。 - break-word:单词会在必要时被拆分以适应容器宽度,从而避免溢出。 例如,在评论列表的场景中,若要让过长的...

    2021-2022计算机二级等级考试试题及答案No.17230.docx

    16. 文本字段容量:文本类型字段在数据库中最多可容纳255个英文字符或127个汉字。 17. 参照完整性:实施参照完整性后,子表无法输入主表中不存在的值。 18. 键盘类型:常见键盘有101键和104键两种,区别在于功能键...

    CSS3其他新增文本样式.pdf

    默认情况下,浏览器会根据不同语言的规则自动进行换行,比如英文在空格或连字符处换行,中文则可以在任意位置换行。 `word-break`属性的常见取值包括: 1. `normal`:遵循浏览器的默认换行规则。 2. `break-all`:...

    css中文手册 css样式表

    4. **层叠(Cascading)**:CSS中的“层叠”意味着当有多个样式应用于同一元素时,浏览器会根据权重决定应用哪个样式。权重由选择器的类型决定,ID选择器权重最高,类次之,标签最低,内联样式权重最高。 5. **继承...

Global site tag (gtag.js) - Google Analytics