【前端】0、1等数字宽度不一致导致样式不对齐问题

最新推荐文章于 2025-04-21 17:48:32 发布

斯文的孙

最新推荐文章于 2025-04-21 17:48:32 发布

阅读量1.1k

点赞数 10

分类专栏： react函数组件+ts+vite项目开发笔记文章标签：前端 vue react javascript css

本文链接：https://blog.csdn.net/weixin_45887187/article/details/140106874

版权

react函数组件+ts+vite项目开发笔记专栏收录该内容

2 篇文章

订阅专栏

问题分析

ui设计图要求各行的数字宽度一一对齐，但是实际情况是不同的数字宽度不同，无法一一对齐

解决

使用等宽字体即可，下面提供两种：

font-family: Helvetica Neue;
font-family: Monaco;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

斯文的孙

关注关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在网站中使用谷歌“ROBOTO”字体（解决ios数字1和0大小不等宽问题）

SunSeekerX

10-16

1951

在网站中使用谷歌“ROBOTO”字体（解决ios数字1和0大小不等宽问题）在开发中发现在mac上数字0和1所占的宽度不一样，网上查询需要用到等宽字体，但是浏览器支持的默认几种等宽字体中文很难看，随即引入谷歌的字体进行渲染。最近在写一个移动端的web项目，designer设计的页面效果图就是使用Google Roboto Font。The Roboto Font 是Google为Androi...

前端面试八股文（超详细）

热门推荐

m0_50861631的博客

03-06

16万+

JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。一、Promise是什么？ Promise是最早

参与评论您还未登录，请先登录后发表或查看评论

css宽度设置对数字不起作用

weixin_49234845的博客

08-05

594

加入css属性： word-break:break-all; //只对英文起作用，以字母作为换行依据，数字也可以换行 word-wrap:break-word; //只对英文起作用，以单词作为换行依据，能换行，但是宽度会超出设定宽度.

div里面的文字每行最后不对齐（解决思路）

wangzhen12138的博客

05-21

662

为了更具体地解决问题，你可以提供一些代码示例或更详细的描述，这样我可以给出更具体的建议和解决方案。

解决真机测试小程序0和1对不齐(或宽度不一致)的问题

m0_38005980的博客

07-13

1023

真机测试，1 的宽度就是比 0 要窄，怎么解决呢？解决---> 假设时间列表的容器为 a ，a里面的内容左对齐，然后 a 在它的父元素的里面居中其中红色框代表 a , 蓝色框代表它的父元素结果---> 就会发现 1 变成了另一个1 （原谅我打不出来）。就对齐了。。。至于原因我也不知道是为啥，如有哪位小可爱解答一下，感激不尽 ...

数字等宽 ios html5,小猿圈WEB前端之HTML5+CSS3面试题（二）

weixin_33508411的博客

06-17

164

原标题：小猿圈WEB前端之HTML5+CSS3面试题(二)上次小猿圈web前端老师讲到关于HTML5+CSS3面试题，因为篇幅有限，只写了其中的一部分，下面我们就了解余下关于HTML5+CSS3面试题的内容。一、消除transition闪屏.css{/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-transform-style: preserve-3d;/*(设置进行转换...

数字1渲染和其他数字大小不一致

韩旭不会敲代码吧的博客

04-06

734

数字1渲染和其他数字大小不一致

前端面试宝典V4.0--2022.1.pdf

06-30

W3C标准盒模型（IE盒模型不一致）中，元素的总宽度和总高度等于内容区域加上内边距和边框。 5. **CSS选择器优先级**：选择器的优先级由组合器决定，数字依次为ID选择器（100）、类选择器（10）、属性选择器和伪类...

UIOTOS文档：表单组件 | 页面嵌套零代码低代码 0代码无代码 iframe 数据大屏 web组态前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

qq_69807227的博客

08-17

1049

输入框、文本框、对话框、下拉框等等表单组件

【前端面试必杀技】前端面试中如何完美回答项目中遇到哪些挑战？

最新发布

前端面试题宝典

04-21

714

在前端开发工程师的面试中，"请描述一下你在项目中遇到的挑战以及如何解决"是一个高频问题。无论你是初级、中级还是高级开发者，准备好这个问题的回答都能让你在面试中脱颖而出。

前端200道面试题及答案（更新中）

m0_65450343的博客

06-11

11万+

偶然发现的css冷知识-数字占位问题

u011035085的博客

07-27

469

在使用内部系统时发现同一类型审批流审批节点的时间展示有差别，本地跑没有问题，真机就展示有异常（IPhone12,14），经过一轮排查最后发现是由于不同数字占位像素不一样，具体如下。1.可以通过 {font-variant-numeric:tabular-nums} 属性来实现数字的等宽。2. 也font-feature-settings: "tnum" 来实现相同的功能。修改了放时间的div的的宽度。具体参考这位大佬的博客。

字符串截取（汉字，字母，数字在浏览器所占像素不同，保证截取的字符串所占像素一致）

masterphp的博客

01-22

1485

字符串截取（汉字，字母，数字在浏览器所占像素不同，字符串截取（汉字，字母，数字在浏览器所占像素不同，保证截取的字符串所占像素一致）保证截取的字符串所占像素一致）

css文字和数字或者英文对不齐解决方案

SiShen654的博客

10-26

8856

由于文字基准线的不同，导致了数字偏上，英文偏下，当与中文一起排序时会有没有居中感，解决方案如下： height: 50px; line-height: 51px; /* 将行高比高度多出1px即可 */

开发日记(01) - uni-app 使用等宽字体对齐数字宽度

SunSeekerX

01-06

2575

uni-app 使用等宽字体对齐数字显示 0️⃣ 问题 ❓ 开发的过程中遇到数字显示列表，发现同样的数字数宽度不一。android 不会有， web 浏览器和 ios 会出现。之前也有遇到过，也解决了，写过文章记录在网站中使用谷歌“ROBOTO”字体（解决 ios 数字 1 和 0 大小不等宽问题），不过文章没有明确的代码，也比较潦草，这次加上代码。本次解决方案不仅仅适用于 uni-app，包括 nvue, 还有普通的 vue react 项目都能用。知道原理了，移植解决方案很简单。原因：默认或者使

html中数字的大小不一样,html的input表单限制纯数字及字符长度

weixin_28799111的博客

06-09

923

1、限制字符长度用maxlength属性2、限制input输入框为纯数字：a、onkeyup = "value=value.replace(/[^\d]/g,'')"使用onkeyup事件，有bug，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母b、onchange = "value=value.replace(/[^\d]/g,'')"使用onchange事件，在输入...

css中字体大小适配

MrNoboday

09-26

4933

# 字体大小的两种单位 font-size: 16px; // 固定大小，就是16像素 font-size: 1vw; // 相对大小，下面介绍转化方法结果先说怎么做适配：只需要将每个关于长宽的参数单位由px（像素）换位vw即可。那么关键怎么装换？ px 像素，我们通常使用的单位，如果html中的文字使用px作为大小单位的话，就会存在适配问题，即字体大小不能根据屏幕宽度适配。 vw 相对...

这个 CSS 属性冷门但贼好用

小生方勤

03-29

470

大家好，我是恺哥。这个系列以后每次会介绍一个冷门但贼好用的 CSS 属性。对于数字来说，每个数字的宽度都不一定是相等的。比如说对于 1 和 2 来说，从 1 变成 2 的时候宽度一定会发生变化。如果此时周围有元素的话，就会造成元素位置的偏移。我们以分页器为例，当页码发生变化的时候，不等宽的数字会造成左侧箭头的位置偏移，大家可以从下图中看到示例：当遇到这种情况时，我们可以通...

CSS:文本字数不一致实现文本两端对齐——text-align属性

summer_gf的博客

08-14

5605

在我们制作表单或者个人信息的时候，经常会遇到类别名称字数不一致的问题，为了使网页更加美观我们一般使其两端对齐，或许我们都经历过使用空格处理阶段，现在用css就可以解决啦。 text-align 属性 text-align属性可以指定元素文本的水平对齐方式。属性值值描述 left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit

文本方向不一致

03-16

### 关于文本显示方向不一致问题在处理文本显示方向不一致的问题时，通常涉及以下几个方面： #### 1. 编码设置不当引发的方向问题如果文本文件的编码未被正确识别或解析，则可能导致某些特殊字符（如右向左书写的阿拉伯语或其他双向文字）显示错误。这可能表现为文本方向混乱或排列错乱。为了防止此类问题，在读取和保存文件时应指定正确的编码方式[^1]。 ```python with open('example.txt', 'r', encoding='utf-8') as f: content = f.read() print(content) ``` 通过上述方法可以确保文件中的字符能够按照预期的方式呈现其书写方向。 --- #### 2. CSS 属性影响文本方向有时文本方向不一致可能是由于样式表中设置了 `direction` 或其他相关属性所致。例如，CSS 中的 `direction: rtl;` 可能会改变整个容器内的文本流向为从右到左。可以通过检查 HTML 元素的具体样式来定位原因[^2]。以下是调整文本方向的一个简单例子： ```css /* 设置文本从左至右 */ .text-ltr { direction: ltr; } /* 设置文本从右至左 */ .text-rtl { direction: rtl; } ``` 将这些类应用到目标元素即可修复潜在的方向问题。 --- #### 3. Vue.js 组件中文本溢出导致的方向偏差对于前端框架（如 Vue.js），当节点内容过多或者布局设计不合理时，也可能间接造成视觉上的方向感丢失现象。一种常见做法是对超出长度的内容实施自动换行操作以优化用户体验[^3]。下面展示了一个基于字符串长度动态插入换行符的技术实现片段： ```javascript function formatText(text, maxWidth) { let result = ''; const chineseWidth = 12; // 汉字宽度假设值 const otherCharWidth = 6; // 英文/数字等字符宽度的一半 let currentWidth = 0; for (let char of text) { if (/[\u4e00-\u9fa5]/.test(char)) { // 判断是否为汉字 currentWidth += chineseWidth; } else { currentWidth += otherCharWidth; } if (currentWidth >= maxWidth && /\s/.test(result.charAt(result.length - 1))) { result += '\n'; // 插入换行符 currentWidth = 0; } result += char; } return result; } console.log(formatText("这是一个测试字符串This is a test string", 180)); ``` 此函数可以根据给定的最大宽度参数重新整理输入串结构，从而避免因单行过长而引起的阅读困难甚至误判为方向紊乱的情况发生。 --- #### 4. 图片加载失败干扰整体页面排版另外值得注意的是，有时候看似是文本方向不对劲的现象实际上是由嵌套资源缺失所引起——比如 CKEditor 富文本编辑器里未能成功渲染图片链接地址的话，可能会破坏原有布局平衡进而连带影响附近文字表现形式[^4]。因此建议核查所有外部依赖项的状态正常与否后再做进一步分析判断。 ---