博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css文字两端对齐
阅读量:5034 次
发布时间:2019-06-12

本文共 653 字,大约阅读时间需要 2 分钟。

最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是用的都是类似的技巧:

text-align:justify; text-justify:inter-ideograph;

 后来,终于在StackOverflow上找到解决方法了。

样式:

div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }

HTML:

hello, text justify.
hello, text justify.
中 文 两 端 对 齐
中 文 两 端 对 齐

效果图:

从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。

转载于:https://www.cnblogs.com/sheqiuluo/p/7122847.html

你可能感兴趣的文章
hexo 搭建博客
查看>>
建造者模式(屌丝专用)
查看>>
Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点
查看>>
酷狗的皮肤文件存放在哪
查看>>
C++的引用
查看>>
T-SQL查询进阶--深入浅出视图
查看>>
Android读取url图片保存及文件读取
查看>>
完整ASP.Net Excel导入
查看>>
循环队列的运用---求K阶斐波那契序列
查看>>
python itertools
查看>>
Linux内核调试技术——jprobe使用与实现
查看>>
http://lorempixel.com/ 可以快速产生假图
查看>>
编写一个函数isMerge,判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成...
查看>>
函数式编程与参数
查看>>
[Qt] this application failed to start because it could not find or load the Qt platform plugin
查看>>
文件操作
查看>>
CNN 笔记
查看>>
版本更新
查看>>
SQL 单引号转义
查看>>
实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端
查看>>