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

    目录 EsClientRHL 更新日志 开发原因: 使用前你应该具有哪些技能 工具功能范围介绍 工具源码结构介绍 开始使用 未来规划 git地址:https://gitee.com/zxporz/ES ...

  2. SummerVocation_Learning--java的自动打包与解包

    Auto Boxing: 自动将基础类型转换成对象(JDK1.5之后支持) Auto UnBoxing:自动将对象转换成基础类型 如 Map中的put方法,如果要传入键值对<a,1>,&l ...

  3. .NET中变量生存期

    Web窗体后台 cs 文件中,创建类作用域的变量,在关闭页面的时候并不会消失,当 IIS 站点被关闭的时候,才会调用这个变量的析构函数 但是好像也不肯定在关闭站点才会析构,应该是外层对象析构的时候才会 ...

  4. AT2386 Colorful Hats (乱搞题,思维题)

    分情况讨论的神题... max不等于min + 1 或者不等于min,这种情况显然不存在. 如果都等于一个数 有两种情况: 互相独立,那么a[i]肯定==n-1 有相同的,那么a[i]一定不是独立的. ...

  5. 配置管理-SpringCloudConfig

    1.搭建配置管理服务 添加依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...

  6. React学习记录二

    环境基本弄清楚了以后,开始总会写个hello world什么的,开发做了这么久了,就跳过这一步吧. 还是从打开vscode说起吧,这里文件菜单打开一个文件夹Demos,查看菜单打开集成终端,也可以使用 ...

  7. 服务端Latex解析成图片或者HTML或者SVG方案

    Latex公式表达式在服务端进行转换成可用数据 使用语言与扩展 node.js Mathjax (文档链接) MathJax在nodejs上解决方案 mathjax/MathJax-node(GitH ...

  8. MySQL存储引擎MyISAM与InnoDB的区别比较

    使用MySQL当然会接触到MySQL的存储引擎,在新建数据库和新建数据表的时候都会看到. MySQL默认的存储引擎是MyISAM,其他常用的就是InnoDB了. 至于到底用哪种存储引擎比较好?这个问题 ...

  9. B1066 图像过滤 （15分）

    B1066 图像过滤 (15分) 图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式 ...

  10. 第 8 章: 模块, 包与分发---Word

    第八章: 模块, 包 与 分发 描述: 大型Python程序以模块和包的形式组织.另外,Python标准库中包含大量模块.本章详细介绍模块和包系统.还将提供有关如何安装第三方模块和分发源代码的信息. ...