最近在工作项目中接触到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. Blacksmith test

    最近使用Blacksmith 对各种K,V数据库做了一些测试,从中了解了一些各种数据库的设计方式,比较各种数据库的性能 BlaskSmith是我们自己的产品,详细的产品信息可以在github上看到 h ...

  2. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  3. js混淆 反混淆 在线

    js反混淆地址:http://www.bm8.com.cn/jsConfusion/ 在线javascript 混淆http://www.moralsoft.com/jso-online/hdojso ...

  4. word2vec 入门(二)使用教程篇

    word2vec 要解决问题: 在神经网络中学习将word映射成连续(高维)向量,这样通过训练,就可以把对文本内容的处理简化为K维向量空间中向量运算,而向量空间上的相似度可以用来表示文本语义上的相似度 ...

  5. Search gold(dp)

    Search gold Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Subm ...

  6. Wheel ProgressBar 实现之三——模拟进度过程

    1. 效果展示: 知道如何画圆弧,如何精确画出进度文本之后,我们将进入 Wheel ProgressBar 实现的最后一个过程:模拟其动态呈现过程.如下图所示,初始时显示进度为 0 (上图),点击进度 ...

  7. 用Windows Live Writer 2012发博客

    一.软件准备: 最新版的是Windows Live Writer 2012,但是不提供单独的安装包,它是和微软其它软件一起的(包括MSN.Window Move Maker等),软件大小为131M,官 ...

  8. cassandra命令

    压力测试:cassandra-stress [command] -node [nodes] -mode thrift user=[user] password=[password] example: ...

  9. delete大批量数据引起空间爆满处理

    前一天晚上做大表删除操作测试,分段删除,没删除100000条commit一次,由于存储过程打印了执行时间中途断网,无法看到执行时间于是直接kill了任务结果早上登录测试数据库发现空间爆满然后一时糊涂去 ...

  10. jvm如何知道那些对象需要回收

    1 首先的问题是:jvm如何知道那些对象需要回收 ? 目前有两种算法 引用计数法 每个对象上都有一个引用计数,对象每被引用一次,引用计数器就+1,对象引用被释放,引用计数器-1,直到对象的引用计数为0 ...