css3 中text-align:justify

css3中text-align:center:justify;

这个属性是单词两端对齐的意思。

值justify可以使文本的两端对齐。在两端对齐的文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字符间的间隔,使各行的长度恰好相等。

举例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>css中display:justify</title>
    <style>
    .box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify;}
    .box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:left;}
    </style>
  </head>
  <body>
      <div>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
      <div>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
  </body>
</html>

效果图:

时间: 2024-10-11 09:09:23

css3 中text-align:justify的相关文章

CSS3小分队——text分身text-shadow

上一篇:<CSS3小分队——进击的border-radius> 上一篇把border-radius拉上台走了个秀,今天我们轮着角色接着走.台下一团shadow在蠕动,恩,今天上台的是一个shadow属性.关于shadow的属性有两个:box-shadow和text-shadow,今天我们说的是text-shadow先. 一.shadow阴影的背后 text-shadow在CSS2中出现过,可是昙花一现,在CSS2.1中又被抛弃了,现在这团阴影又在CSS3中满血归来. 顾名思义,text-sha

CSS3中的media媒体查询

媒体查询多用于响应式网页中. 1.初始化设置: 在HTML文件中,网页顶部<head></head>标签中插入一句话: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话在于对响应式网页做一个初始化设置,主要包括: name="viewport&quo

CSS3中的弹性流体盒模型技术详解(二)

在上一篇文章<CSS3中的弹性流体盒模型技术详解(一)>里,我给大家列出了,从css1到css3各版本中盒子模型的基本元素.本篇我会把余下的属性进行详细讲解. box-pack 作用:用来规定子元素在盒子内的水平空间分配方式 box-pack 语法:box-pack: start | end | center | justify; start 对于正常方向的框,首个子元素的左边缘吸附在盒子的左边框显示 对于相反方向的框,最后子元素的右边缘吸附在盒子的右边框显示 end 对于正常方向的框,最后子

CSS3中的伪类概览,很实用的

CSS的目标,或者说是革命纲领就是:"将样式与内容分离",这个目标能否实现,很大程度上依赖于CSS访问内容的能力.在CSS3中,这个任务得到了有力支持,强大的结构伪类Structural pseudo-classes出现了.提供了非常丰富的查询方式,让CSS选择器变得如此和蔼可亲了.让我们来快速概览一下,同时期待着浏览器整体换代的来到,毕竟只有最新的浏览器才支持CSS3选择器及其他特性. 支持浏览器:Firefox 3.1+, IE8+ (only in IE8 standards m

媒体查询的应用以及在css3中的变革

CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类型. 在html4中,媒体样式表的写法是 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link re

聊聊CSS3中的transition

W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值.简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果. transition主要有***四个属性***,那这四个属性怎么记呢?变换的话总得有变换的属性名吧,知道是要哪个属性变,还得有变换的持续时间吧,持续时间里还得有变换速率吧,是先快后慢呢还是先慢后快呢

Css3中的响应式布局的应用

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu

CSS3中动画效果Transitions与Animations的区别

在CSS3中,如果我们使用动画功能,可以使页面上的文字或图像具有动画效果,可以使我们的页面更加生动具有吸引力. 在CSS3中我们可使用的动画功能有两种,Transitions与Animations.下面我们来看看它们两者的区别. 首先来看Transitions功能,它的属性有: transition-property :指定需要平滑过渡的属性 transition-duration :设定平滑过渡使用的时间 transition-timing-function :设定平滑过渡使用的方法 tran

img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&