飞龙博客

飞龙博客 飞龙在天

justify两端对齐前端css兼容火狐谷歌Safari安卓IOS解决方案

feilong.org 修订于2021-12-17 06:22:18 1,577 次浏览

此例子飞龙进行全面深入测试,如何让文字左右两端对齐。css里面的 justify ,好像很鸡肋。怎么让justify真正起作用?怎么兼容ios或safari浏览器,该怎么处理justify的css属性值?解决方案。

css的 justify 并不处理块内的最后一行文本,
包括不处理块内仅有一行文本的情况(也就是既是第一行也是最后一行)。

飞龙提示:
1、text-justify 主要针对IE浏览器中的汉字。
2、必须和text-align:justify一起使用才有效。
3、汉字最好是用加空格打散,才能保证在 Safari 里 也能 完完全全的两端对齐!

.taj{text-align:justify;text-justify:inter-ideograph;overflow:hidden;}
.taj:after{content:'';display:inline-block;width:100%;} 

.taf{text-align:justify;text-align-last:justify;text-justify:distribute-all-lines;}
.taf2{text-align:justify;text-align-last:justify;text-justify:inter-ideograph;}

.box{ margin-top:30px;width:300px;background-color:#eee;}

方法一:伪元素加一行,让 text-align:justify 对 非最后一行 起作用。此法最佳!但是,会多一行高度!

如何设置文本两端对齐呢? 如何设置文本两端对齐呢? 如何设置文本两端对齐呢?对齐呢对齐呢对齐呢对齐呢对齐呢对呢
how to justify words how to justify words how to justify wordswords

方法二: text-align:justify 和 text-align-last:justify; 结合起来用。
但是Safari不支持 text-align-last. 此法不适合IOS!

how to justify words how to justify words how to justify wordswords
如何设置文本两端对齐呢? 如何设置文本两端对齐呢? 如何设置文本两端对齐呢?对齐呢对齐呢
how to justify words how to justify words how to justify wordswords
如何设置文本两端对齐呢? 如何设置文本两端对齐呢? 如何设置文本两端对齐呢?对齐呢?对齐呢

飞龙提示你把代码粘贴到你的html页面,要亲自测试。

更新网址:https://feilong.org/text-align-last-justify-safari-ios-chrome-ie
最初发布:20181012 09:59:51 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: html css 教程

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认