实现段落文字两端对齐的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; ...
随机推荐
- thymeleaf获取当前时间并格式化输出
有时候会需要在模板中直接打印时间的需求,如果输出一个时间还需要在java类中去获取model的话,那未免也太麻烦了,以下为thymeleaf在模板中直接获取时间戳并格式化输的代码 获取时间戳 < ...
- Python02 变量
变量 因为Python是弱变量类型编程语言,所以变量赋值不需要类型声明. 每个变量在内存中创建,都包括变量的标识,名称和数据这些信息. 每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 变量 ...
- iOS启动原理及应用生命周期
ios程序启动原理及生命周期图: ios应用程序的入口是main.m 1 #import <UIKit/UIKit.h> 2 3 #import "WYSAppDelegate. ...
- VS Code 用户自定义代码片段(React)
VS Code 用户自定义代码片段(React) .jsxReact组件模板:javascriptreact.json { "Import React": { "pref ...
- JAVA 优先获取外网Ip,再获取内网Ip
1.获取内网Ip private String getLocalhostIp(){ String hostAddress = ""; try { InetAddress addre ...
- MySql学习笔记01
MySql01 课程介绍 数据库简介 之前通过流操作文件的方式存储数据弊端: 1. 效率低 2. 不管是存还是取都比较麻烦 3. 一般只能存储小量数据 4. 只能存储文本数据 什么是DB DataBa ...
- 二十二、MySQL 正则表达式
MySQL 正则表达式 在前面的章节我们已经了解到MySQL可以通过 LIKE ...% 来进行模糊匹配. MySQL 同样也支持其他正则表达式的匹配, MySQL中使用 REGEXP 操作符来进行正 ...
- 以太坊国内节点大全(ropsten)
admin.addPeer('enode://2d1e1f1242c3b54ea56046f74f15943f47ab410e3c0b82bffb501793ebb19e147f8f0e63d01c2 ...
- JZOJ 4737. 金色丝线将瞬间一分为二 二分答案
4737. 金色丝线将瞬间一分为二 Time Limits: 1000 ms Memory Limits: 262144 KB Detailed Limits Goto ProblemSet ...
- JZOJ 2137. 【GDKOI2004】城市统计 (Standard IO)
2137. [GDKOI2004]城市统计 (Standard IO) Time Limits: 1000 ms Memory Limits: 128000 KB Detailed Limits ...