text-align:justify_内容居中对齐

一直发现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>
复制代码

 

本文作者:方方和圆圆

本文链接:https://www.cnblogs.com/diligenceday/p/4018462.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(1326)  评论(0编辑  收藏  举报

再过一百年, 我会在哪里?

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
点击右上角即可分享
微信分享提示