可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,用的都是类似的技巧:
text-align:justify;
text-justify:inter-ideograph;
我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用。还好在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:
<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 两 端 对 齐</div><br/>
<div class="justify">中 文 两 端 对 齐<span></span></div>
效果图:

从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。
可用的CSS文字两端对齐的更多相关文章
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- p标签text-align:justify以及CSS文字两端对齐
p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...
- 【】小技巧】CSS文字两端对齐
需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...
- 【小技巧】css文字两端对齐
一.文字两端对齐方法: text-align-last: justify; 二.举个丽子: 三.效果如下: 四.注意: 要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.
- CSS 文字两端对齐
<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv=&quo ...
- 实现段落文字两端对齐的css样式
有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: jus ...
- css实现表单label文字两端对齐
如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
随机推荐
- Windows服务安装完成后自动启动
public ServiceInstaller() { //... Installer code here this.AfterInstall += new InstallEventHandler(S ...
- 跨越多台haproxy 跳转
<pre name="code" class="python">在zjtest5环境的haproxy上配置: 需要 访问acl host_zjcap ...
- 关于URL编码的问题
在进行WEB开发时,字符集编码常常困扰着我们.我们需要区分两种情况,一是URL编码,二是HTTP Body编码.这两种编码所处理的机制不同. URL编码和解码 客户端负责对URL编码,服务端负责解码. ...
- vc6.0 使用Ado 连接MS-SqlServer2000 连接字符串
vc6.0 使用Ado 连接MS-SqlServer2000 连接字符串 分类: C/C++ VC 2012-04-12 20:23 836人阅读 评论(0) 收藏 举报 sql server数据库服 ...
- 【FSFA 读书笔记】Ch 2 Computer Foundatinons(1)
Data Organization 1. 进制转换. 按照正常的书写顺序写一个数字(无论多少进制),其中最左边的列称为“最高有效符号”,最右边的列称为“最低有效符号”. (The right-most ...
- POJ 1724 最短路费用限制
迪杰斯塔拉裸题 最大花费 n个点 m条有向边 起点终点 路径长度 路径花费 问:在花费限制下,最短路径的长度 #include <iostream> #include <string ...
- HDOJ 4417 - Super Mario 线段树or树状数组离线处理..
题意: 同上 题解: 抓着这题作死的搞~~是因为今天练习赛的一道题.SPOJ KQUERY.直到我用最后一种树状数组通过了HDOJ这题后..交SPOJ的才没超时..看排名...时间能排到11名了..有 ...
- 深入了解 Flexbox 伸缩盒模型
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...
- OC基础11:基本的C语言特性2
"OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 19.定义一个int类型的指针: int ...
- Xcode8 注释快捷键无效, 解决方案
这个是因为苹果解决xcode ghost.把插件屏蔽了.解决方法命令运行: sudo /usr/libexec/xpccachectl 然后必须重启电脑后生效