最近在工作项目中接触到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. jdk1.6下载页面

    http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...

  2. wikioi1688 求逆序对

    题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我们称之为逆序对,求逆序对的数目 数据范围:N<=105.Ai<=105. ...

  3. 二探ListView

    使用draw9patch 打开内置terminal 输入CD C:\Users\Gaby\AppData\Local\Android\sdk 在该目录下输入draw9patch 导入图片,开始绘制 本 ...

  4. OC基础1:一些基本概念

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于类方法和实例方法: (1).类方法 ...

  5. _itemFailedToPlayToEnd: { kind = 1; new = 2; old = 0; }

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. 实现winfrom进度条及进度信息提示,winfrom程序假死处理

    1.方法一:使用线程 功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线程,如果不采用多线程控制进度条,窗口 ...

  7. C#软件winform程序安装包制作及卸载程序制作

    使用vs2010 winform程序开发的软件的人比较多,程序的开发是为了在不同的人不同的机器使用,为了使不同的机器能使用该软件就需要在制作程序安装包,安装包里必须包含该软件运行所选的所有环境,下面就 ...

  8. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  9. input的样式简介

    <input type="text" autocomplete="off" placeholder="" x-webkit-speec ...

  10. JavaScript function函数种类(转)

    转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...