移动端显示内容“文字”+“数值”出现文字与数值提前还行，数值部分不换行情况（记录一个问题）

最新推荐文章于 2023-04-04 17:12:56 发布
最新推荐文章于 2023-04-04 17:12:56 发布
阅读量179 收藏
点赞数
分类专栏： 测试 测试数据 文章标签： 前端 软件测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34897661/article/details/127747749
版权

记录最近在测试过程中出现的一个样式问题：

正常纯文字显示样式

 内容为“文字”+“数值”：

前端样式问题，仅做记录，比较容易忽略这种情况的测试 

天之影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动端热点问题
MingL520的博客
05-31 417
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
css 常用技巧 （单行溢出 和 多行溢出 字母太长不换行问题 移动端适配安全距离 两端对齐）
Lee_taotao的博客
11-22 2490
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 需要设置一个宽度，不能是行内元素 display: -webkit-box; -webkit-line-clamp: 3; // 多行 -webkit-box-orient: vertical; ...
在uniapp或者vue中，单行文字或者数字无法换行导致后面内容无法展示问题的解决方案
二三的博客
11-17 4848
在vue或者uniapp的开发中，有时候会遇到比较奇怪的问题，这里以uniapp举例： <view> <text>任务归类：23146498798798865456465489797</text> <text>任务归类：23146498798798865456465489797</text> </view> 在我的实际开发中，如果 text 标签中的内容为数字，且内容过长的时候，在h5端显示会导致不换行，从而只展示前面的内容；但
写前端移动端页面遇到的问题
qq_34179819的博客
04-04 95
前端问题记录
文字、字母以及数字的换行不换行问题总结
热门推荐
前端小白
03-03 1万+
实现页面的文字、字母的展示效果的时候，相信大家都会遇到过一些这样的要求：“文字不能换行，要强制文字一行展示”或者是“字母不会自动换行，需要实现可以自动换行断句”等等诸如此类的要求，现在就这个文字、字母换不换行的问题，说说这三个css属性的巧妙运用：white-space、word-wrap、word-break 首先，先来看下这三个属性在W3C上给出的释义：（具体这三个属性各自有哪些属性值需要大
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
七七的博客
10-18 1612
使用meta标签设置视口宽度，制作适配不同设备宽度的网页。修改主轴对齐方式属性: justify-content。视口：显示HTML网页的区域，用来约束HTML尺寸。思考：默认情况下，网页的宽度和逻辑分辨率相同吗？使用flex-direction改变元素排列方向。思考：默认情况下，多个弹性盒子如何显示？制作网页参考物理分辨率还是逻辑分辨率？注意: 只占用父盒子剩余尺寸。解决办法：添加视口标签。移动端主流设备分辨率。
echart横轴文字显示省略号_echarts图表里label文字过长换行的方法
weixin_39616287的博客
12-19 1567
在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下 formatter: function(val) { var strs = val.split(''); //字符串数组 var str = '' for(var i = 0, s; s = strs[i++];) { //遍...
vue 处理表格数据：一行放多个记录
随记
11-29 5344
后端返回的是一条一条的数据，前端需要在一行中显示三个记录，并且每列的排序号需要依次排 table代码： <table class="t4" border="1" cellpadding="1" cellspacing="1" align="center" style="width:100%;"> <tr> ...
非主流文字转换_一篇搞定微信公众号文字排版（全干货，推荐收藏）
weixin_39708502的博客
12-14 796
这是米奥的第01 篇笔记作者 |米奥来源 | 米奥笔记I D | miaobiji01为什么要重视排版回想一下，你一般都是在什么场景下来阅读公众号的推文？可能是窝在被窝时、坐公交地铁时、排队吃饭时、工作学习开小差时，甚至是厕所蹲坑时……在这么“将就”的环境下，我们很难高度集中我们的注意力来阅读一篇文章。所以，高颜值的排版要让用户看起来舒服、轻松，而不是花枝招展；另外，在这样的...
小程序源码 移动端商城 (代码+截图)
06-19
小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小...
css实现移动端图片文字水平居中
09-24
在移动端网页设计中，经常需要将图片和文字组合在一起，并且要求它们整体水平居中，以达到美观和用户体验的效果。本文将介绍两种CSS方法来实现这个目标。 首先，我们来看第一种解决方案，它利用了行内元素的`...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+Vant.rplib
02-23
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件 Axure原型演示及下载地址：...
（毕设）基于Android的学生在线学习平台（移动端+服务器端+数据库）
08-11
博主毕业时自己开发的基于Android的学生在线学习APP，是一个相当完整的系统，该系统开发了移动端和服务器端两个系统。内附系统完整的源代码、开发运行环境说明、系统文档、数据库等等。此外压缩包中还包含博主在平时...
java毕业设计基于springboot+vue的视频资讯类手机移动端web平台源码+数据库.zip
02-18
是一个集新闻、小说、视频于一体的手机移动端web平台，有完善的后台管理系统。 java毕业设计基于springboot+vue的视频资讯类手机移动端web平台项目源码+数据库.zip已答辩通过的高分项目，代码完整开箱即用。是一个...
web测试知识详解
天之角的博客
11-21 7850
1 web测试 web测试..............................................................................................................................1 1. 分类及测试要点....................................................
XFTP上传文件时出现上传错误（未知错误）
天之角的博客
08-30 3761
记录一下自己在工作中用到XFTP上传文件到服务器（JAR包上传构建测试环境）时出现的问题： 起因：前两天构建环境上传文件还正常，今天上传时出现上传失败情况，一开始还能上传一部分上去后失败，之后上传出现的全是0字节即失败（为后面找到问题铺垫）。 一开始以为是软件问题，重新关闭打开XFTP重试多次一样的结果。排除软件问题，上传其他文件（excel小文档）上传出现0KB错误情况，同样无法上传，排除上...
传智播客软件测试学习视频汇总：
天之角的博客
07-13 1448
课程名称 分类 URL 提取码 软件测试入门到精通 视频 http://yun.itheima.com/course/490.html?aoe cnj1 资料 https://pan.baidu.com/s/1n2HGsU3fjlLImtnBL6HfUg w4zf 软件测试教程两天搞定Mysql 视频 http://yun.itheima.com/course/491.html?aoe 资料 https://pan..
关于测试的一些想法
天之角的博客
01-02 330
作为一个测试人员，我算是个渣渣，才做测试两年左右的时间，但是我喜欢看，看一些文章，也喜欢交流，跟开发交流。 技术还是很渣，这必须自己承认，但是看了一段时间最近一直觉得测试其实都有一定的思维定式。 我参与一个测试的技术群（之前也有过几个类似的）通过一些别人的讨论还有自己的了解，大部分的测试都有思维定时，或者以为家庭或者因为学历经历或者一些其他的因素，或多或少都存在一定的定式局限。我也有，虽然我也...
flex布局代码， pc端一行显示2个，切换到移动端一行显示一个
最新发布
07-23
你可以使用Flex布局来实现在PC端一行显示两个元素，而在移动端一行只显示一个元素的效果。以下是一个示例代码： ```css .container { display: flex; flex-wrap: wrap; } .item { flex-basis: 50%; } @media (max-width: 768px) { .item { flex-basis: 100%; } } ``` 在HTML中，你可以按照以下结构组织元素： ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> ``` 在上述示例中，`.container`表示容器元素，使用Flex布局，并设置`flex-wrap: wrap`以便在需要时换行。`.item`表示每个项目元素，通过`flex-basis`属性设置元素的基础大小。在PC端，我们将`.item`的基础大小设置为50%，这样两个元素就能够并排显示。而在移动端（当视口宽度小于等于768px时），我们通过媒体查询（`@media`）将`.item`的基础大小设置为100%，这样每个元素就会独占一行。 这样，当页面在PC端浏览时，两个元素会并排显示；而在移动端浏览时，每个元素会独占一行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值