Question

文本溢出如何以css2中的点结束？我做的设计如下 -

<div class="container">
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">Address</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("Address")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">City</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("City")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">State</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("State")%></span></div>
            <div style="padding-bottom:5px;"><span style="float:left;width:30%;">PIN</span><span style="width:2%;">:</span><span style="padding-left:5px;width:60%;"><%#Eval("PostalCode")%></span></div>
    </div>

css如下 -

.container 
{
    background:#EFF2F7;
    float:left;
    margin:0px 15px 10px 0px;
    border:1px solid #768BB7;
    max-width:23%;
    min-width:22%;
    max-height:120px;
    min-height:100px;
    padding-left:2px;
}

Answer 1

您无法在CSS Level 2或2.1中执行此操作。你只能在CSS 3中做到这一点。浏览器支持很好，包括回到IE6：https://developer.mozilla.org/en/CSS/text-overflow

overflow: hidden;
text-overflow: ellipsis;

Answer 2

只是一个快速指针，如果你尝试使用

overflow: hidden;
text-overflow: ellipsis;

在桌子上，在你设置

之前它们将无法工作表标记上的

table-layout:fixed属性。

Answer 3

我不知道你为什么要坚持使用CSS2，但我建议你这样做：

.container { position: relative; }
.ellipsis  { position: absolute; bottom: 0; right: 0 }

<div class="container">
    Text goes here.
    <div class="ellipsis">...</div>
</div>

当然，这只会在容器DIV的右下角为您提供一个包含三个点的方框，但这样就可以在不使用JavaScript的情况下使用。

文本溢出如何以css2中的点结束应该怎么办？

3 个答案: