css3的文本效果text-justify

原创 2013年12月03日 10:29:24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div
{
text-align:justify;
text-justify:distribute;
}
</style>
</head>

<body>
<h1>CSS text-justify 实例</h1>

<div>Shanghai is the largest city by population in the People's Republic of China (PRC) and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology, and transport. It is a major financial center and the busiest container port in the world.</div>

<p><b>提示:</b>请调整浏览器窗口的大小,来查看齐行效果。</p>

<p><b>注释:</b>text-justify 属性只在 IE 中有效。</p>
</body>
</html>

引用w3school的例子

语法

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;
描述 测试
auto 浏览器决定齐行算法。 测试
none 禁用齐行。 测试
inter-word 增加/减少单词间的间隔。 测试
inter-ideograph 用表意文本来排齐内容。 测试
inter-cluster 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。 测试
distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。 测试
kashida 通过拉伸字符来排齐内容。 测试

调节浏览器窗口大小后的效果(个人实验text-justify:inter-word;在火狐上有效果,以上的那些没有效果):




版权声明:原创文章,请标明出处~~~

相关文章推荐

css3 text-shadow设计文本阴影

css3 text-shadow设计文本阴影

CSS3中text-overflow支持以...代替超出文本

CSS3中text-overflow支持以...代替超出文本。   1.div1:默认状态。超出文本默认显示在div外   2.div2:text-overflow:ellipsis; 使...

《CSS3实战》笔记--文本阴影:text-shadow

text-shadow CSS3

CSS3实战1-文本属性text-shadow的用法

text-shadow 定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了,但是在css3中又重新定义了,并且增加了不透明度的效果。 基本语法text-shadow:none |...

CSS3弹性布局内容对齐(justify-content)属性使用详解

内容调整(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配...
  • iefreer
  • iefreer
  • 2016年03月01日 22:02
  • 21391

了解CSS3的文字阴影效果 - Text Shadow effects

日期:2012-4-8  来源:GBin1.com 以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow...
  • jjfat
  • jjfat
  • 2012年04月10日 15:04
  • 649

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法: text-shadow : none |  none | [, ] *  或none | [, ]* 相关属性 : 无 取值:  :指定颜色。 :由浮点数字和单位标识符组成...

使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。 比如你只是想调...
  • iefreer
  • iefreer
  • 2016年03月13日 18:48
  • 9258

css3文本效果

CSS3 包含多个新的文本特性。下面就来简单的介绍一下。1、text-shadow:向文本添加阴影。h1{ text-shadow: 5px 5px 5px #f3e; }效果图如下: 2、text...

CSS3字体与文本效果

CSS3允许我们使用自定义字体 也多了一些不错的文本效果自定义字体使用自定义字体需要使用@font-face规则 当然首先你要有自定义文字文件Payen S.Tsung@font-face { ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文本效果text-justify
举报原因:
原因补充:

(最多只允许输入30个字)