加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS text-justify 属性 详解

css3基础 2022-07-14 17:33:54小码哥的IT人生shichen

CSS text-justify 属性

定义和用法

text-justify 属性指定 text-align 设置为 "justify" 时文本的对齐方式。

该属性规定如何对齐行文本进行对齐和分隔。

实例

齐行改变单词间的间隔：

div
{
text-align:justify;
text-justify:inter-word;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:justify;
text-justify:inter-word;
}
</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 语法

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

属性值

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

技术细节

默认值： auto
继承性： yes
版本： CSS3
JavaScript 语法： object.style.textJustify="inter-word"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
支持* 11.0 55.0 10.0.3 支持*

* 此功能位于“启用实验性 Web 平台功能”首选项中（需设置为“已启用”）。如需更改 Chrome 中的首选项：请在 Chrome 浏览器中输入“chrome://flags”。如需更改 Opera 中的首选项：请在 Opera 浏览器中输入“flags”。

完整实例1：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" checked="checked" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例2：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="none" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例3：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="inter-word" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例4：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="inter-ideograph" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例5：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="inter-cluster" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例6：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="distribute" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例7：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
text-align:justify;
text-justify:auto;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>text-justify:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="kashida" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="auto" />auto</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="inter-word" />inter-word</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="inter-ideograph" />inter-ideograph</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="inter-cluster" />inter-cluster</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="distribute" />distribute</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="kashida" />kashida</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
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>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
text-align:justify;
text-justify:<span id="CodeValue">auto</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.textJustify=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024