实现段落文字两端对齐的css样式

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐,只需要设置两个css

样式即可。

.demo{
       text-align: justify;
       text-justify: inter-ideograph;/*IE*/
}

text-justify基本语法

语法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph 
参数: 
auto :允许浏览器用户代理确定使用的两端对齐法则 ;
inter-word :通过增加字之间的空格对齐文本,该行为是对齐所有文本行最快的方法,它的两端对齐行为对段落的最后一行无效 ;
newspaper : 通过增加或减少字或字母之间的空格对齐文本,是用于拉丁文字母表两端对齐的最精确格式 ;
distribute :处理空格很像newspaper,适用于东亚文档,尤其是泰国 ;
distribute-all-lines :两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行,适用于表意字文档 ;
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现段落文字两端对齐</title>
    <style>
        *{margin:0;padding:0;}
        .demo{
            width: 300px;
            height: 200px;
            margin: 20px auto;
            font-size: 14px;
            color: #0a78fa;
            text-align:justify;
            text-justify:inter-ideograph;/*IE*/
            border: 1px solid #fa5275;
        }
    </style>
</head>
<body>
<p class="demo">
    川剧流行于四川全境和云南贵州等省部分地区,是融汇高腔、昆曲、胡琴(即皮黄)、弹戏(即梆子)和四川民间灯戏五种声腔艺术而成的剧种。
    川剧,是中国汉族戏曲剧种之一,流行于四川东中部、重庆及贵州、云南部分地区。川剧脸谱,是川剧表演艺术中重要的组成部分,
    是历代川剧艺人共同创造并传承下来的艺术瑰宝。川剧由昆曲、高腔、胡琴、弹戏、灯调五种声腔组成。
</p>
</body>
</html>

效果如下:

参考链接:http://blog.sina.com.cn/s/blog_7db0c22a01011emo.html

时间: 2024-10-25 18:48:08

实现段落文字两端对齐的css样式的相关文章

可用的CSS文字两端对齐

最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideograph; 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: 1 div.justify 2 { 3 text-align: justify; width:200px; font-size:15px; colo

【】小技巧】CSS文字两端对齐

需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上图中“122账号”“122密码”这样的,就不好计算该用几个空格了. 假如我们有如下HTML: <div>这世间唯有梦想和好姑娘不可辜负!</div> 给它加点样式 div{ width:500px; border:1px solid red; text-ali

HTML,文字两端对齐

text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .justify        {            text-align: justify;            width: 100px;        }        .justify > span        {            display: inline-block /* Ope

如何实现文字两端对齐?

输入框左侧的文字有时候长度不一致 ,但是文字无论左对齐还是右对齐都不好看,如下图所示: 但是两端对齐就会和谐很多,如下图: 实现两端对齐方只需一行代码:text-align-last: justify; 原文地址:https://www.cnblogs.com/hj0711/p/9203080.html

CSS文字两端对齐

text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; width: 86px

CSS 文字两端对齐

.key { display: inline-block; width: 100px; vertical-align: text-top; text-align: justify; text-justify: inter-ideograph;/*IE*/ } .key:after { content: " "; display: inline-block; width: 100%; } 原文地址:https://www.cnblogs.com/caster-xzn/p/10309464

文字两端对齐

刚看到的一个问题但是之前有碰到过记录一下 CSS: .container{ width:100px; height:50px; text-align: justify; text-justify:inter-ideograph; background-color:#428bca; color:#fff; } .container>span{ padding-left:100%; } HTML: <div class="container"> 您好呀<span&g

文字两端对齐 text-align: justify;

width: 64px; display: inline-block; text-align: justify; text-align-last:justify; -moz-text-align-last:justify;/* moz */ text-justify:inter-ideograph;/* ie */

探索发现:CSS实现中文两端对齐

今天在搜索"CSS实现中文两端对齐"的解决方法时,偶然发现了这个hack: 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px; } div.justify > span