一直发现text-align : justify这个对齐方式不好使，都不知道为什么么么哒；

因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符，用户代理会把这个行的最后几个字符往右边拉，实现两端对齐；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test-align:justify</title>

</head>

<body>

<style>

p{

    width:200px;

    text-align:justify;

    word-break:break-all;

}

</style>

<p>

    justify居中对齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中对齐齐  justify居中</p>

<p>

    sdfsdfsdfjustfysdfs    f    f    f    f    f     fdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfyustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfy

</p>

<p>

    sdfsdfsdfju

     stfysdfsdfsdfjustfysdfsdfsdf

     justfysdfsdf                 sdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsd

     fsdfjustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfj                 ustfysdfsdfsdfjustfysdfsdfsdfjustfysdfsdfsdfj

     ustfyustfysdfsdfsdfjustfysd                 fsdfsdfjustfysdfsdfsdfj                 ustfysdfsdfsdfjustfysdfsdfsdfj

     ustfysdfsdfsdfjustfy

</p>

<p>

    我 是一段可以两端对齐的文字， 你 仔细看看， 我 的对齐方式都贴着 容器左右的边缘。

</p>

</body>

</html>

text-align:justify_内容居中对齐的更多相关文章

  1. C# WPF DataGrid 隔行变色及内容居中对齐

    C# WPF DataGrid 隔行变色及内容居中对齐. dqzww NET学习0     先看效果: 前台XAML代码: <!--引入样式文件--> <Window.Resourc ...

  2. css3实现左右div高度自适应且内容居中对齐

    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...

  3. line-height，vertical-align及图片居中对齐问题根源解析

    关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解. 查阅了一下<css权威指南>,结 ...

  4. HTML学习笔记——各种居中对齐

    0.前言     水平居中基本方法--指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块能够在父元素中水平居中. 样式例如以下: 1:margin:0px auto 2:margi ...

  5. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  6. CSS居中对齐终极指南

    本文首发于我的公众号:前端新世界 欢迎关注 本文将讨论可用于居中对齐元素的6种CSS技术(按照最佳实践排序),以及每一种技术最适合应用的场景.这里,居中对齐指的是将元素放置在其父元素的水平和垂直中心. ...

  7. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  8. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

  9. vue小组件练习之文字居中对齐组件

    时隔多月,继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用V ...

随机推荐

  1. Codeforces Round #275 Div.1 B Interesting Array --线段树

    题意: 构造一个序列,满足m个形如:[l,r,c] 的条件. [l,r,c]表示[l,r]中的元素按位与(&)的和为c. 解法: 线段树维护,sum[rt]表示要满足到现在为止的条件时该子树的 ...

  2. java 12-5 StringBuffer的几个案例

    1. 把数组拼接成一个字符串 public class StringBufferTest2 { public static void main(String[] args) { //定义一个数组 in ...

  3. Netty指定分隔的字符

    package org.zln.netty.five.part02; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; ...

  4. Git之分支创建策略

    分支策略:git上始终保持两个分支,master分支与develop分支.master分支主要用于发布时使用,而develop分支主要用于开发使用. 创建master的分支developgit che ...

  5. C语言 指针与字符串

    C语言可以在栈区 or 堆区 or 全局区 存放字符串,字符串不单单是存储在全局区的. //字符串与指针 #include<stdio.h> #include<stdlib.h> ...

  6. 在matlab中对hsv进行均匀量化和非均匀量化

    首先,进行非均匀量化,H,S,V三通道分别量化为16,4,4级,返回一个向量.量化依据如下表: function vec = getHsvHist(Image) [M,N,O] = size(Imag ...

  7. android json解析及简单例子

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...

  8. 实现可以滑动的GrildView，类似美团网首页的GrildView功能菜单

    首先上实现效果图,不会做动态图,就先凑合着看吧 使用了网上的一个开源控件viewpagerindicator,可以自定义切换时候显示的标记,圆点,或者下划线. GrildView显示的是手机上的全部a ...

  9. 详解C# 迭代器[转]

    迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素 ...

  10. Chrome扩展开发之一——Chrome扩展的文件结构

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...