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;在火狐上有效果,以上的那些没有效果):




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

使用javascript和css来实现textbox水印效果

Introduction In this article, I will explain how watermark textbox using JavaScript and CSS is ve...
  • aiouwen521
  • aiouwen521
  • 2013年01月22日 15:38
  • 1951

CSS3——文本、段落

文本属性 1.阴影文本text-shadow
  • qq_17613195
  • qq_17613195
  • 2016年01月06日 10:07
  • 697

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等,今天我们来研究几款文字效果,主要利用text-shadow、webkit内核的几个独有特性实现效果。...
  • whqet
  • whqet
  • 2014年05月04日 21:25
  • 28655

css3文字霓虹灯光效果

css3文字霓虹灯光效果         *{   margin: 0;   padding: 0; } body{   background-color: ...
  • wustzbq0713
  • wustzbq0713
  • 2015年06月06日 13:29
  • 1156

CSS3(四)—— CSS3文本效果

CSS3 文本效果 CSS3 包含多个新的文本特性。 在本章中,您将学到如下文本属性: rgba 颜色 text-shadowword-wrap 浏览器支持 属性 ...
  • helloliuhai
  • helloliuhai
  • 2014年03月17日 16:40
  • 396

css3文本效果

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

CSS3字体与文本效果

CSS3允许我们使用自定义字体 也多了一些不错的文本效果自定义字体使用自定义字体需要使用@font-face规则 当然首先你要有自定义文字文件Payen S.Tsung@font-face { ...
  • q1056843325
  • q1056843325
  • 2016年11月15日 20:48
  • 998

CSS3文本效果 、字体

CSS3文本效果 、字体
  • safiri
  • safiri
  • 2016年07月06日 09:15
  • 328

[14]CSS3 文本效果

一.文本阴影HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性。CSS3 提供了 text-shadow文本阴影效果,这个属性在之前用过,只是没有涉及浏览器支持情况。 ...
  • yougoule
  • yougoule
  • 2017年01月04日 08:21
  • 223

CSS3做涟漪的效果

涟漪的效果 @keyframes myfirst { from {border:0 solid #E4684D; left:1px;top: 1px;} to {border:12px s...
  • learninginJAVA
  • learninginJAVA
  • 2015年04月24日 14:31
  • 2150
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文本效果text-justify
举报原因:
原因补充:

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