实现段落文字两端对齐的css样式
有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐，只需要设置两个css
样式即可。
.demo{
text-align: justify;
text-justify: inter-ideograph;/*IE*/
}
参数：
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样式的更多相关文章
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- 可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...
- 【】小技巧】CSS文字两端对齐
需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...
- p标签text-align:justify以及CSS文字两端对齐
p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...
- css实现表单label文字两端对齐
如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...
- 【小技巧】css文字两端对齐
一.文字两端对齐方法: text-align-last: justify; 二.举个丽子: 三.效果如下: 四.注意: 要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.
- HTML,文字两端对齐
text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .just ...
- CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...
- CSS 控制文字两端对齐
<html> <head> <style> td:after { content: ''; } td p{ font-size: 14px; width: 5em; ...
随机推荐
- MAC 设置登录欢迎语
MacdeMacBook-Pro:etc mac$ cd /etc MacdeMacBook-Pro:etc mac$ cat motd 技术沉淀,空杯心态! _______ _______ _ __ ...
- Python-Boolean operation
一.布尔运算符 1.x and y: if x is false, then x, else y 2.x or y: if x is false, then y, else x 3.not x: if ...
- 使用POI解析Excel文件
Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 下载开发包: 解压上面的zip文件: 在项目中引入 ...
- 从指定的view中截图 返回UIImage
-(UIImage *)getImageFromView:(UIView *)view{ UIGraphicsBeginImageContext(view.bounds.size); [view.la ...
- 2018.10.30 NOIp模拟赛T2 数字对
[题目描述] 小 H 是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为 n 的序列{ai},她想找出一段区间[L, R](1 <= L <= ...
- php微信红包算法
微信红包算法.php /**生成红包的函数*/ function getRandMoney($totalMoney, $totalPeople=2, $miniMoney=1){ $randRemai ...
- java util - Unicode转换工具
测试代码 package cn.java.codec.unicode; public class Test { public static void main(String[] args) throw ...
- PHP switch问题
$a = 0; switch($a){ case $a > 7: echo 234; break; case $a > 2: echo 4556; break; default: echo ...
- docker时区正常，但java获得的时间早了8小时解决方法
我解决容器时区的方法是挂载宿主机的/etc/localtime 到容器的/etc/localtime,这时输入date命令容器时区显示正常,但是跑在容器中的java项目取到的时间却早了8小时. 查阅相 ...
- BFS:HDU2612-Find a way(双向BFS)
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...