单行文字两端对齐：css方式和css+JS方式

 

 

无论移动端还是PC端都会有这样的列表，网上查了一下，实现的方式都不完美。有时候UI那边相差1px都会给你逼逼逼。所以还是折腾一下吧。

我们都知道text-align:justify，但是它不处理块内的最后一行文本，所以，为了实现该功能，又不想增加额外的标签，最终用了伪类 :after。

仅仅这样是不行的，文字中需要空格，感觉这样麻烦。而且如果是动态生成的HTML就不行了。所以，想到了用letter-spacing。字数不同，letter-spacing的值肯定也不同。

letter-spacing的值计算方式如下：

需要增加的空隙长度=(4-3)/2 也就是 (最大文本个数-当前文本个数)/(当前文本个数-1)

 

纯CSS实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字两端对齐</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<style>
/*
 * 单行文字两端对齐
 * .text-justify {width:字数em   4em}
 * letter-spacing: 最大栏目字数 - 当前行的字数 / 当前行的字数 - 1 
*/
body,p {margin:0;padding:0;}
.text-justify {white-space:nowrap;text-align:justify;}

.data-list {margin:20px;padding:10px;border-radius:5px;border:1px solid #ccc;background-color:#f8f8f8;}
.data-list .item {padding:4px 0;overflow:hidden;line-height:1.3;font-size:14px;}
.data-list .flag {width:4em;float:left;color:#999;}
.data-list .text {margin-left:6em;display:block;color:#444;}
.data-list .text-justify-w2 {letter-spacing:2em;} /* 4-2 / 2-1 = 2em*/
.data-list .text-justify-w3 {letter-spacing:.5em;} /* 4-3 / 3-1 = 0.5em*/
</style>
</head>

<body>







<div class="data-list">
    <p class="item">
        <span class="flag text-justify text-justify-w2">订单</span>
        <span class="text">20165464646445645</span>
    </p>
    <p class="item">
        <span class="flag text-justify">生成时间</span>
        <span class="text">2016-05-16 13:52:23</span>
    </p>
    <p class="item">
        <span class="flag text-justify text-justify-w3">收货人</span>
        <span class="text">小小蓝</span>
    </p>
    <p class="item">
        <span class="flag text-justify">联系电话</span>
        <span class="text">13685474563</span>
    </p>
    <p class="item">
        <span class="flag text-justify text-justify-w4">联系地址</span>
        <span class="text">广东省 广州市 萝岗区 视联科技园C3栋视联科技园C3栋视联科技园C3栋</span>
    </p>
    <p class="item">
        <span class="flag text-justify text-justify-w4">物流信息</span>
        <span class="text"></span>
    </p>
</div>





</body>
</html>

 

 

 

如果页面中比较多类型的东东，字数又不确定，不想每次都计算letter-spacing，可以用JS处理。

function textJustify(elem) {
    var lengths = [];
    elem.each(function () {
        lengths.push($(this).text().length);
    });
    if (!lengths.length) return;
    for (var i = 0, smax = lengths[0], len = lengths.length; i < len; i++) {
        if (lengths[i] > smax) {
            smax = lengths[i];
        }
    }
    for (var i = 0, len = lengths.length; i < len; i++) {
        var currlen = lengths[i];
        if (currlen == smax) {
            continue;
        }
        elem.eq(i).css({"letter-spacing": ((smax - currlen) / (currlen - 1)) + "em"});
    }
}

//调用
textJustify($(".text-justify"));

 

posted @ 2016-06-22 14:29  赵小磊  阅读(2245)  评论(0)    收藏  举报
回到头部