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

    --3.查询10部门所有员工的姓名.(ref游标实现) 动态游标 declare --创建一种游标类型 type type_cursor is ref cursor; --声明变量指定游标类型 v_c ...

  2. convert命令

    可以修改图片的分辨率 convert -resize 600×600 src.jpg dst.jpg src.jpg是你要修改的图片的名字 dst.jpg是新生成的图片名字

  3. MAC之tar解压与压缩gz打包命令

    tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...

  4. 一些常用的集合工具的代码块(缓慢更新XD,更新了多属性过滤:) )

    更新记录 虽然经常放鸽子,但是还是要记录一下更新 2017.8.30 更新了listToMap的方法,现在可以指定多个属性进行分组了,例如你要指定一个学生集合,按照名字和年龄相同的放在一组,现在只要调 ...

  5. 操作系统(1)_操作系统结构_李善平ppt

    cpu和内存之间通过地址总线.数据总线.控制总线连接.外部总线连接外部设备.下图有问题,内存和外设没有直接连接.同一组总线,CPU和内存连接的时候硬盘就不能和内存连接,否则有冲突,core和core之 ...

  6. 问题001：Java软件，属于系统软件还是应用软件呢？

    在学习Java前要掌握的一些小问题: 问题一:Java软件,属于系统软件还是应用软件呢? java语言应用在计算机系统上,首先应知道计算机系统分为几部分? 计算机系统由硬件系统和软件系统两部分构成.硬 ...

  7. 1025: [SCOI2009]游戏

    Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2727  Solved: 1794[Submit][Status][Discuss] Descripti ...

  8. Freemaker基于word模板动态导出压缩文件汇总整理

    Freemaker基于word模板动态导出压缩文件汇总整理 Freemaker基于word模板动态导出单个文件思路和代码详情见连接: https://www.cnblogs.com/lsy-blogs ...

  9. LeetCode954二倍数对数组

    问题:二倍数对数组 给定一个长度为偶数的整数数组 A,只有对 A 进行重组后可以满足 “对于每个 0 <= i < len(A) / 2,都有 A[2 * i + 1] = 2 * A[2 ...

  10. shell数组脚本

    #!/bin/bash array=( ) ;i<${#array[*]};i++)) do echo ${array[i]} done 脚本2 #!/bin/bash array=( ) fo ...