余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室,是义乌外贸网站建设专家!

两端对齐英文文字的css代码

分类:网页设计 Tags: css 评论:0 浏览:5091 最近更新时间:2014/8/23 13:16:27

 在做英文网站时,英文文章在后面总是不对齐,显示很不好,不像中文那样。那么我们怎样管制呢。其实只要加上justify就可以了。

代码如下:

<div style="text-align:justify;">
中间是英文资料
</div>

<div align="justify">
中间是英文资料
</div>

这样就英文显示就可以对齐了,单词也不会断开。

但是有时候我们需要单词断开就在后面加个“-”,怎样做呢?代码如下:

<div style="text-align:justify;text-justify:inter-ideograph;">
中间是英文资料
</div>

这样就可以了,不过这个代码好像只有在IE里用。

--------------------------------------------------------------------

如果上面代码没效果,可以参考下面的代码:

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%; }
<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元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。

本文地址:https://www.yuzhiguo.com/527/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:3.231.212.98,来自:

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email