text-align:justify的使用

Posted yaoyao-sun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text-align:justify的使用相关的知识,希望对你有一定的参考价值。

text-align 属性是规定元素中的文本的水平对齐方式,设置块级元素内文本的水平对齐方式。

在平常的开发过程中,对于text-align一般用到的是left,center,right。justify很少用到,它实现两端对齐文本效果,文本行的左右两端都放在父元素的内边界上。

 

转自博文:https://www.cnblogs.com/jyybeam/p/6074619.html

效果初体验

首先有个比较简单的例子。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .demo{
            width: 70px;
            /*text-align: justify;*/
        }
    </style>
</head>
<body>
    <div class = ‘demo‘>
        <p>飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</p>
    </div>
</body>
</html>

 

不使用justify的结果:

技术图片

 

使用justify,可以看出每一段都对齐了:

技术图片

 

在表单中的应用

技术图片

当text-align:justify使用在单行中,是起不到justify的作用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 70px;
            text-align: justify;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>昵称:</span><input type="text" style = ‘width: 100px‘><br><br>
        <span>电子邮箱:</span><input type="email" style = ‘width: 100px;‘>
    </div>
</body>
</html>

 

既然单行不行,那么就用多行。但是怎么用单行呢?——用after

需要将span设置为float: left,:after为inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 100px;
            text-align: justify;
            float: left;
        }
        span:after{
            content:‘.‘;
            width: 100%;
            display: inline-block;
            overflow: hidden;
            height: 0;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>昵称</span><input type="text" style = ‘width: 100px‘><br><br>
        <span>电子邮箱</span><input type="email" style = ‘width: 100px;‘>
    </div>
</body>
</html>

 

结果为:

技术图片

 

以上是关于text-align:justify的使用的主要内容,如果未能解决你的问题,请参考以下文章

关于text-align:justify的问题

text-align:justify的使用

text-align:justify在项目中碰到的问题

css 文字铺满容器,text-align:justify

text-align:justify无效的解决办法

文字两端对齐 text-align: justify;