如何水平对齐div(如文本内)得到省略号

时间:2012-08-07 17:58:56

标签: javascript

我有2个div,里面有一些文字。它们封装在具有固定高度和宽度的父Div中。如果文本溢出父div,我想椭圆文本。

这是我的HTML

<html>
<head>
    <style>

    .pDiv {
        width:50px;
        height:20px;
        border: 1px  solid red;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .div1 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .div2 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
</head>
<body>
    <div class ='pDiv'>
        <div class ='div1'>test testing</div>
        <div class ='div2'>test1</div>
    </div>

</body>
</html>

如果div1文本很长或者div2文本很长,我希望文本是省略的。

任何解决方案?

1 个答案:

答案 0 :(得分:1)

省略号没有显示,因为div1和div2没有分配宽度,因此他们不知道在什么时候开始截断/缩写。也许您可以为每个分配100%的宽度。也就是说,如果你添加     width:100% 对于这两个类,你会在文本上看到省略号。

我建议您查看以下链接:http://www.quirksmode.org/css/textoverflow.html,其中描述了问题及其要求。