css3的文本效果text-justify

最新推荐文章于 2023-10-17 19:19:04 发布

依然那么楞

最新推荐文章于 2023-10-17 19:19:04 发布

阅读量954

点赞数

文章标签： css3 text-justify 文本效果

本文链接：https://blog.csdn.net/ling811/article/details/17091787

版权

<!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;在火狐上有效果，以上的那些没有效果）：

依然那么楞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的文本效果text-justify

div{text-align:justify;text-justify:distribute;}CSS text-justify 实例Shanghai is the largest city by population in the People's Republic of China (PRC) and the largest city proper by populati
复制链接

扫一扫