css属性text-wrap在safari版本中基本不兼容的解决方案

最新推荐文章于 2024-05-16 22:23:32 发布
最新推荐文章于 2024-05-16 22:23:32 发布
阅读量446 收藏
点赞数 1
文章标签： css safari 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56895352/article/details/136150578
版权

场景：

文本需要做到不换行，强制一行，一般使用text-wrap:nowrap,但是safari浏览器不兼容

下面是caniuse的浏览器版本兼容情况

"text-wrap" | Can I use... Support tables for HTML5, CSS3, etc

解决方案：

使用css属性white-space: pre 进行代替，解释一下为什么这个属性可以，pre的效果是可以合并换行符，相当于将换行符消除掉，就可以实现不换行

我爱lol
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS overflow-wrap新属性值anywhere 用法大全
01-19
一、先了解下overflow-wrap属性 CSS overflow-wrap 属性其实就是以前的 word-wrap 属性，MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持，而其他现代浏览器依然支持老的 word-wrap 属性语法，因此，没有任何理由使用 overflow-wrap 属性。 直到有一天 overflow-wrap 属性突然支持了一个新的属性值 anywhere ， overflow-wrap 属性就有了使用的理由了。 overflow-wrap 属性的正式语法如下：
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 一、word-wrap的语法 1、语法 复制代码代码如下: word-wrap ： normal || break-...
前端兼容性问题解决方案（二）
lumot的博客
09-10 1596
IE6IE7Firefox浏览器不兼容原因及解决办法 一、IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下...
微信小程序中部分iPhone手机不兼容white-space: nowrap；的解决方案
ljw_Josie的博客
05-06 1829
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; /* 这句别漏了，毕竟大部分场景适用
display：flex不兼容Android、Safari低版本的解决方案 【flex布局】
itKingOne的博客
01-22 6272
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>flexbox布局title> style> div { border: 1px solid #000; overflow: hidden; } div.flex-h:before, div.
CSS的text-rendering属性
u013411250的博客
03-25 4189
var protocol = window.location.protocol; document.write(''); CSS 属性text-rendering的介绍和使用 - freshlover的专栏 - 博客频道 - CSDN.NET
CSS属性text-overflow的使用问题
11-21
text-overflow：clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1，overflow:hidden;　这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...
CSS text-shadow属性
12-10
最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,...text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firef
css文本换行属性word-wrap和white-space使用总结
01-19
今天碰到了td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，顺便看了一下文本换行的属性word-wrap，总结如下： white-space的默认只是normal，自动换行。 word-break:break-all和word-wrap:...
IE系列不支持CSS的圆角border-radius等属性的解决方案
01-21
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种...
Sass简介：提升CSS开发效率的利器
AIBB_520的博客
05-13 399
Sass，全称为Syntactically Awesome Stylesheets，是一种CSS预处理器，旨在简化和改进CSS的编写方式。通过引入变量、嵌套规则、混合（Mixins）等功能，Sass使得开发者能够更快速、更优雅地书写CSS代码。Sass是一款强大的CSS预处理器，通过引入诸多便捷功能，使得CSS的编写变得更加高效、简洁。
CSS常用滤镜效果
不负光阴不负自己，不负被爱不负所爱 ​
05-13 313
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
CSS font-weight字重数值及对应的字重描述词语
weixin_44443380的博客
05-10 209
2、此外，还有一些关键字可以用于。1、以下是一些常见的。
谷歌浏览器css font-size 10px以下不生效
芳草萋萋鹦鹉洲哦
05-16 134
chrome://settings/fonts 外观——自定义字体——最小字号，修改此处配置即可。这时候如果是谷歌浏览器 需要在去浏览器设置重新设置字体大小。做页面时发现字体到达12px之后 ，无论多少小都无法改变。F12 浏览器控制台定义8px依然无效。
三步在 vite 中配置 tailwindcss
biaov
05-16 285
三步在 vite 中配置 tailwindcss
解决css使用@keyframes/animation属性失效的问题
qq_68155756的博客
05-13 227
导致该属性失效的原因可能有很多种，这里记录我遇到的一种： 以下代码阴影不生效： 以下代码阴影生效：
布局问题——
最新发布
weixin_45678402的博客
05-16 100
【代码】布局问题——
在css中flex-wrap: wrap铀什么作用
12-03
在CSS中，flex-wrap属性用于控制flex容器中的flex项目如何换行。默认情况下，flex项目会在一行上排列，如果一行放不下，它们会溢出到下一行。但是，使用flex-wrap: wrap可以让flex项目在需要时自动换行到下一行，以适应容器的宽度。 具体来说，当flex容器的宽度不足以容纳所有的flex项目时，flex-wrap: wrap会将多余的项目放到下一行。如果设置了flex-wrap: wrap-reverse，则会从下往上排列。 以下是一个示例： ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> ``` ```css .container { display: flex; flex-wrap: wrap; width: 300px; } .item { width: 100px; height: 100px; background-color: red; margin: 10px; } ``` 在上面的示例中，容器的宽度为300px，每个项目的宽度为100px，加上10px的margin，一行最多只能容纳两个项目。因此，当有超过两个项目时，剩余的项目会自动换行到下一行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值