最近在工作项目中接触到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文字两端对齐的更多相关文章

  1. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  2. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  3. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

  4. 【小技巧】css文字两端对齐

    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.

  5. CSS 文字两端对齐

    <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv=&quo ...

  6. 实现段落文字两端对齐的css样式

    有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: jus ...

  7. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

  8. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  9. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

随机推荐

  1. ZigBee物理层协议规范

    在不同的国家和地区,ZigBee技术所允许使用的工作频率是不同的,而对于不同的应用频率范围,其调制方式.传输速率均不同,众所周知,蓝牙技术在世界多数国家都采用统一的频率范围,其范围为2.4GHz的IS ...

  2. Jmeter性能测试 及压测入门

    Jmeter是一个非常好用的压力测试工具.  Jmeter用来做轻量级的压力测试,非常合适,只需要十几分钟,就能把压力测试需要的脚本写好. 为什么要建立线程组?原因很简单,因为我们要模拟多个线程(用户 ...

  3. Java application 性能分析分享

    性能分析的主要方式 监视:监视是一种用来查看应用程序运行时行为的一般方法.通常会有多个视图(View)分别实时地显示 CPU 使用情况.内存使用情况.线程状态以及其他一些有用的信息,以便用户能很快地发 ...

  4. linux下so动态库一些不为人知的秘密(中二)

    继续上一篇< linux下so动态库一些不为人知的秘密(中) >介绍so搜索路径,还有一个类似于-path,叫LD_RUN_PATH环境变量, 它也是把路径编译进可执行文件内,不同的是它只 ...

  5. 在线获取访客QQ号码的原理及实现方法

    原文地址:http://www.piaoyi.org/network/get-qq-haoma-js.html 正 文: 最近,飘易收到不少在线获取网站访客QQ号码的促销推广邮件,有不少商用网站挖掘了 ...

  6. [Leetcode][Python]52: N-Queens II

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 52: N-Queens IIhttps://oj.leetcode.com/ ...

  7. openvpn 连接无法上网

    环境:搬瓦工的vps,centos6,搬瓦工附带的openvpn服务端: 出现的问题:正常启动openvpn客户端,也正常连接服务器,但是连接之后就是没有办法上网: 我的解决办法:打开ip forwa ...

  8. 通过P-SMR看State Machine Replication

    在一个复制系统中,为了保持一致性,各个replicated server是串行运行.这样性能上就会比仅仅有一台server的系统慢,由于仅仅有一台server能够进行并行处理.假设在复制系统中各个se ...

  9. HDU2842-Chinese Rings(递推+矩阵高速幂)

    pid=2842">题目链接 题意:求出最少步骤解出九连环. 取出第k个的条件是,k-2个已被取出,k-1个仍在支架上. 思路:想必九连环都玩过吧,事实上最少步骤就是从最后一个环開始. ...

  10. Fix Elementary Boot Screen (plymouth) After Installing Nvidia Drivers

    Q:I just installed propietary nvidia drivers, after that the glowing “e” plymouth theme was gone, on ...