第三十九篇：关于部分手机white-space失效问题

最新推荐文章于 2024-05-29 10:53:24 发布
最新推荐文章于 2024-05-29 10:53:24 发布
阅读量322 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maliyao4233/article/details/134533893
版权

原先用的 white-space: break-spaces; 来控制文本换行，但是发现这样对部分手机不起作用，然后就把样式换成如下：

word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
路遥努力吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发，苹果手机样式乱，iphon7不支持white-space属性，控制显示几行
qq_34873894的博客
10-19 1481
用一下属性 ytext-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;代替 white-space: nowrap;
flex布局遇到white-space失效问题
Mortimer's Blogs
07-09 4729
        昨天在用vue做移动端单页面时，遇到一个问题，给子标签加上flex等于1，尝试多次无效，发现把white-space属性去掉，就能正常实现等宽自适应布局。        初步定位问题为，white-space对flex弹性布局有影响。在网上找了一系列的资料，找到一个解决办法，给使用了white-space的子标签添加一个属性min-width: 0，可以解决问题。HTML--伪代码...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
tianyaluqingchen的博客
04-11 1991
文字长度过长显示省略号的样式设置方法众所周知： .css { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。 经过搜索排查分析，发现是display: flex;影响的white-space: now
文本编辑器 样式失效 white-space: pre；
teng_liang的博客
06-26 1021
后台使用文本编辑器，编辑文案保存后，在前端页面展示的时候，样式失效，没有换行
微信小程序中部分iPhone手机不兼容white-space: nowrap；的解决方案
ljw_Josie的博客
05-06 1852
bug表现 目前发现iPhoneX， iPhone11 pro， iPhone12 pro 等个别机型对强制不换行的样式失效。 解决方案（亲测） 使用CSS box-orient 属性 /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* 这句别漏了，毕竟大部分场景适用
CSS总结及兼容性问题【笔记】【持续更新】
hann的专栏
09-14 2264
一、字体 1.color:red;颜色 2.font-family:”Microsoft YaHei”, “黑体”,”方正”；字体名称 3.font-size:10(px/pt);字体大小 4.font-style:normal;字体样式(normal (正常)，italic (斜体)，oblique (斜体)) 5.text-decoration:none;指定文字的文本装饰{Undel
常见兼容问题处理方法
qq_33198051的博客
03-21 4303
罗列一些项目中经常遇到的一系列兼容性问题，解决后能够更好的提高用户体验。
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
qq_33290233的博客
06-16 4128
Vue是一套用于构建用户界面的渐进式框架。 渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方式有不是依靠行特别强 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 库是一个模块，而Vue是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心
经常用到 css 样式总结
qq_34703156的博客
07-13 322
1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号 p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflo...
collapse-white-space:用单个空格替换多个空格字符
05-06
import { collapseWhiteSpace } from 'collapse-white-space' collapseWhiteSpace ( '\tfoo \n\tbar \t\r\nbaz' ) //=> ' foo bar baz' 原料药 该程序包导出以下标识符： collapseWhiteSpace 。 没有默认导出。 ...
css white-space:nowrap属性用法（可以强制文字不换行输出）
10-26
css强制文字不换行，可给指定的容器增加white-space:nowrap即，下面把CSS示例写给大家,很简单
Whiteboard-bridge:white-web-sdk，white-sdk-ios，white-sdk-android
04-10
white-sdk-bridge 介绍 基于 dsbridge 将 封装成 native 可用，Android iOS 一致的 API。 iOS 端使用，Android 端使用 调用，保证API 一致性。 web-sdk 使用见 使用 本项目编译出的文件，会被整体打包进 white-sdk ...
css文本换行属性word-wrap和white-space使用总结
01-19
今天碰到了td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，顺便看了一下文本换行的属性word-wrap，总结如下： white-space的默认只是normal，自动换行。 word-break:break-all和word-wrap:...
IE6,IE7下实现white-space:pre-wrap
12-10
HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。 我们知道，在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被视为一个，或者说，连续的多个空白符会被合并。...
CSS 媒体查询 响应式开发
生产队的驴
05-27 277
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 317
垂直居中的几种写法
css让padding、border不占据宽度
最新发布
于忠会的博客
05-29 417
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 109
【代码】了解CSS中的link和@import引入CSS的区别。
.page { display: flex; flex-direction: column; align-items: flex-start; width: 375px; height: 812px; background-color: #000000; font-family: Roboto-Regular; white-space: nowrap; } .view { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: 100px; margin-left: 52px; } .caption { position: relative; overflow: hidden; height: 45px; max-width: 192px; font-family: Roboto-Bold; font-size: 32px; line-height: 45px; color: #ffffff; text-overflow: ellipsis; } .title { position: relative; margin-top: 4px; font-size: 32px; line-height: 38px; color: #c3c3c3; } .item-wrapper { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: 69px; margin-left: 33px; white-space: normal; } .item { width: 294px; height: 287px; } .book-wrapper { position: relative; display: flex; align-items: center; align-self: flex-end; height: 49px; padding-left: 20px; padding-right: 20px; margin-top: 128px; margin-right: 50px; line-height: 20px; border-radius: 10px; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: rgba(196, 196, 196, 1); } .book { font-size: 20px; color: #ffffff; } button{ background-color:transparent; border-style:none; }幫我加入自适应网頁手機
07-23
要使上述CSS样式适应手机设备，您可以使用媒体查询来调整样式和布局。以下是在现有代码中添加媒体查询以适应手机设备的示例： ```css .page { /* 桌面样式 */ display: flex; flex-direction: column; align-items: flex-start; width: 375px; height: 812px; background-color: #000000; font-family: Roboto-Regular; white-space: nowrap; } .view { /* 桌面样式 */ position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: 100px; margin-left: 52px; } .caption { /* 桌面样式 */ position: relative; overflow: hidden; height: 45px; max-width: 192px; font-family: Roboto-Bold; font-size: 32px; line-height: 45px; color: #ffffff; text-overflow: ellipsis; } .title { /* 桌面样式 */ position: relative; margin-top: 4px; font-size: 32px; line-height: 38px; color: #c3c3c3; } .item-wrapper { /* 桌面样式 */ position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: 69px; margin-left: 33px; white-space: normal; } .item { /* 桌面样式 */ width: 294px; height: 287px; } .book-wrapper { /* 桌面样式 */ position: relative; display: flex; align-items: center; align-self: flex-end; height: 49px; padding-left: 20px; padding-right: 20px; margin-top: 128px; margin-right: 50px; line-height: 20px; border-radius: 10px; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: rgba(196, 196, 196, 1); } .book { /* 桌面样式 */ font-size: 20px; color: #ffffff; } button { /* 桌面样式 */ background-color: transparent; border-style: none; } /* 手机样式 */ @media (max-width: 480px) { .page { width: auto; height: auto; padding: 10px; } .view { margin-top: 50px; margin-left: 20px; } .caption { height: auto; max-width: none; font-size: 24px; line-height: 30px; text-overflow: initial; } .title { margin-top: 2px; font-size: 24px; line-height: 30px; } .item-wrapper { margin-top: 40px; margin-left: 20px; } .item { width: auto; height: auto; max-width: 100%; max-height: none; } .book-wrapper { margin-top: 80px; margin-right: 20px; } .book { font-size: 16px; } } ``` 在上述示例中，我们添加了一个媒体查询以应用适应手机设备的CSS样式。媒体查询的条件是最大宽度为480像素，这意味着当浏览器宽度小于或等于480像素时，将应用手机样式。在手机样式中，我们对各个元素进行了调整，以适应手机屏幕的大小和布局。 请注意，这只是一个示例，您可以根据您的具体需求和设计进行进一步的调整和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值