web初学经验:对于IOS不兼容 text-algin:justify

用户头像
荆州/设计爱好者/5年前/195浏览
web初学经验:对于IOS不兼容 text-algin:justify
用户头像
云客秀

对于IOS不兼容 text-algin:justify 转载请注明来源:https://www.yunkexiu.com/ykx_newsdetail/358

最近在写页面的时候遇到了一个问题—当行文本双端对齐,大家都知道CSS属性中有一个“text-align:justify”,但是这个属性使用的时候,要求还是挺多的,尤其是要实现单行文本双端对齐。在对于安卓系统时兼容很容易实现,但是在对于IOS系统,小编在网上查找多翻资料,统统不生效,基乎想用空格来代替。最终还是找到了解决方案.

text-align:justify

当文本出现换行,则除最后一行的所有文本都会实现两端对齐。这时我们想到利用::after伪类,给元素最后设置一个看不见的内联元素,并设置宽度为100%,就可以让我们可以看到的单行文本让浏览器认为是多行文本,从而实现单行文本的两端对齐。

对于安卓系统,很简单。


当对于IOS系统,需要利用::after伪类,给元素最后设置一个看不见的内联元素,并设置宽度为100%


web初学经验:对于IOS不兼容 text-algin:justify

如果不这么写,不管你用火狐浏览器,谷歌浏览器看出来的效果都是对齐的,但是,上传服务器时,却是ISO不兼容,小编测试多次,记住利用::after伪类,给元素最后设置一个看不见的内联元素,并设置宽度为100%。




5
阅读原文
|
举报
|
收藏
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
手表表盘UI系列
【新年UI图标】体育icon
钱包ui模板
新能源APP应用UIKit
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
【新年UI图标】旅行icon
【新年UI图标】钱包icon
UI通用设计素材1
UI 登录界面设计模板包
【新年UI图标】秒杀icon
【新年UI图标】30个图标
【新年UI图标】礼物/活动icon
新拟态风格 UI设计组件库
智能家居中心 简约 UI设计组件库
【新年UI图标】汽车icon
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
3D渐变流体抽象矢量UI背景图
拟物风质感写实UI卡片合集源文件
你可能喜欢
大家都在看
登录注册