如何使div的水平对齐，例如其中的文本被省略

Question

I have 2 div's which have some text in them. 我有2个div，里面有一些文字。 They are encapsulated within a parent Div which has fixed height and width. 它们封装在具有固定高度和宽度的父Div中。 I want to ellipse the text if they overflow outside the parent div. 如果文本在父div之外溢出，我想将其省略。

Here is my HTML 这是我的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>

I want the text to be ellipsed if either the div1 text is long or the div2 text is long. 如果div1文本很长或div2文本很长，我希望文本被省略。

Any solutions? 有什么办法吗？

Answer 1

The ellipses don't show because the div1 and div2 don't have widths assigned to them, and as such they don't know at what point to begin truncating/abbreviating. 省略号不会显示，因为div1和div2没有分配宽度，因此它们不知道在什么时候开始截断/缩写。 Perhaps you could assign 100% width to each. 也许您可以为每个分配100％的宽度。 That is, if you add width:100% to both of the classes, you'll see ellipsis on the text. 就是说，如果您将width:100%都添加到两个类中，则会在文本上看到省略号。

I would suggest taking a look at the following link: http://www.quirksmode.org/css/textoverflow.html which describes the issue and requirements thereof. 我建议您看一下以下链接： http : //www.quirksmode.org/css/textoverflow.html ，其中描述了该问题和要求。

如何使div的水平对齐，例如其中的文本被省略

问题描述

1 个解决方案

解决方案1
1 2012-08-07 18:09:54

如何使div的水平对齐，例如其中的文本被省略

问题描述

1 个解决方案

解决方案1 1 2012-08-07 18:09:54

解决方案1
1 2012-08-07 18:09:54