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

效果如下：

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

  1. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  2. 可用的CSS文字两端对齐

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...

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

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

  4. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  5. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

  6. 【小技巧】css文字两端对齐

    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.

  7. HTML,文字两端对齐

    text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .just ...

  8. CSS实现文字两端对齐

    最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...

  9. CSS 控制文字两端对齐

    <html> <head> <style> td:after { content: ''; } td p{ font-size: 14px; width: 5em; ...

随机推荐

  1. Java不同对象之间复制属性

    // 导入包import org.springframework.beans.BeanUtils; /** * 调用工具复制2个对象之间的属性 2个JavaBean对象复制的属性名相同 * @para ...

  2. for循环语句中的先后执行顺序

    for(int i=0;i<10;i++){ cout<<i; } 分析程序运行结果:for(cout<<"a";cout<<" ...

  3. 第十二篇、OC_仿淘宝商品详情页的翻页

    // // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...

  4. API调用微信getWXACodeUnlimit()获取小程序码

    微信文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/qr-code/getWXACodeUnlimit.html? ...

  5. 微信小程序页面跳转绑定点击事件

    https://www.cnblogs.com/mrszhou/p/7931747.html

  6. 牛客小白月赛1 G あなたの蛙は旅⽴っています【图存储】【DP】

    题目链接:https://www.nowcoder.com/acm/contest/85/G 思路: DP 空间可以优化成一维的, 用一维数组的 0 号单元保存左斜对角的值即可. 存图这里真不好理解 ...

  7. PAT 乙级 1024

    题目 题目地址:PAT 乙级 1024 题解 模拟题,重点需要考虑到各种不同情况:简单来说一下: 因为输入格式固定,所以把不同的部分分别存储和处理可以在很大程度上简化运算:其中需要考虑最多的就是小数部 ...

  8. JS学习笔记-构造函数篇

    创建实例 funtion Fn (){     var num = 10;         this.x = 100;     this.getX = function(){         cons ...

  9. php订单号的生成

    来自ECSHOP订单号生成函数:/includes/lib_order.php文件中的get_order_sn() /** * 得到新订单号 * @return string */ function ...

  10. PHP去掉字符串中的数字

    这个比较简单,但是也有些需要注意的地方,先贴代码 $class=preg_replace("\\d+",'', $res); 需要使用preg_replace函数,但是只是这么写的 ...