Question

我昨天问了这个SO question，以便在我的测试表格中使用省略号。

但是，我现在有另一个我无法解决的问题，这个问题与我的答案有关。

当我在小预览中显示用户数据时，省略号生效并显示给用户。这是通过在HTML中使用display：table-cell来完成的。如下图所示：

enter image description here

当用户在较大的模态窗口中查看相同的代码时，省略号不再有效，因为有空间显示用户数据。但是，这会使Data di completamento（resumeStyleFinishDateLabel25）过宽，如下所示：

enter image description here

如何更改CSS，以便 Data di completamento 的div只与文本 Data di completamento 一样宽位于开始日期旁边 - 01/2009 ？ div中的文字可以是不同的语言，意思是不同的文字长度，所以我不能使用固定宽度的div

我尝试将CSS显示从table更改为inline-block，但这会禁用省略号的效果。我已经完成了一些CSS论坛和SO线程的阅读，但我想不出办法自己解决这个问题。

我希望有人能告诉我。

这是我的HTML：

<div class="resumeStyleStandardTableRow25">
    <div class="resumeStyleStandardLabels25">Decorrenza</div>
    <div class="resumeStyleStandardLabelContent25">
        <div class="table_ellipsis">
            <div class="resumeStyleDateStartContent25">01/2009</div>
            <div class="resumeStyleFinishDateLabel25">
                <div class="ellipsis">Data di completamento</div>
            </div>
            <div class="resumeStyleDateFinishContent25">
                <div class="ellipsis_finishDate">11/2011 (2 anni, 10 mesi)</div>
            </div>
        </div>
    </div>
</div>

这是我的CSS：

.resumeStyleStandardTableRow25 {
    display: table-row;
}

.resumeStyleStandardLabels25 {
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.resumeStyleStandardLabelContent25 {
    direction: ltr;
    display: table-cell;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

.table_ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;

    width: 75px;
}

.resumeStyleFinishDateLabel25 {
    background-color: #fff;
    color: #000;
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;

    background-color: lime;

}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumeStyleDateFinishContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;


}

.ellipsis_finishDate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    background-color: yellow;
}

Answer 1

我建议在这种情况下使用CSS3 flexbox ，它非常支持ellipsis，并使标记更加简单。浏览器支持 IE10 + 。

DEMO：http://jsfiddle.net/cxpj7zaz/ [调整输出框架的大小并查看]

<div class="flexbox">
    <div class="item">Decorrenza 01/2009</div>
    <div class="item">
        <div class="ellipsis">Data di completamento</div>
    </div>
    <div class="item">
        <div class="ellipsis">11/2011 (2 anni, 10 mesi)</div>
    </div>
</div>

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.item {
    min-width: 0;
    margin: 5px;
    border: 1px solid grey;
}
.item:nth-child(1) { /*DO NOT SHRINK*/
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: yellow;
}

Answer 2

<!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="http://i.imgur.com/Bj3KBRt.png" type="image/x-icon" /> <title>Welcome to Wumbo.Net!</title> <body> <style> <style> ::-moz-selection { /* Code for Firefox */ color: #ffffff; background: #00ffaa; } ::selection { color: #ffffff; background: #00ffaa; } </style> <style> /* unvisited link */ a:link { color: #00ffaa; } /* visited link */ a:visited { color: #00d486; } /* mouse over link */ a:hover { color: #57ffd5; } /* selected link */ a:active { color: #00ffaa; } #center{ width:60%; margin-right:auto; margin-left:auto; background-color:white; } </style> </head> <body background="http://i.imgur.com/hySVC7M.png"> <div id="center"> <center> <h1><font face="trebuchet MS" color="dbdbdb">This Site is Under Construction!</h1> <p>In a few months, when I am finished, I will unveil this site! In the meantime, also for updates, follow me on twitter. <br> I also have a Youtube channel where I upload stupid crap!</p> <br> <h1> MY SOCIAL NETWORKZ</h1> <br> <a href="https://twitter.com/BullCloaker">Twitter</a> <br> <a href="https://youtube.com/user/calluvdutyplayr9"> My Youtube Channel</a> <br> <a href="https://wumbotheelephant.newgrounds.com"> My Newgrounds (I'm not super active on it) </a> <br> <p> I'm not sure what I'm going to do with this site, <br> But it will most likely be a portfolio, where I share all the drawings, <br> animations and other such things I've made. <br> Seeya! <br> <font face="trebuchet MS" color="#00ffaa"> ~Wumbo</font> </font> <br> <br> <br> <br> <br> <br> <font color="dbdbdb">//!This is empty space to the skin customizer, this space is safe for content, feel free to use!\\</font> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <font face="trebuchet MS" color="#00ffaa" size="2">You are currently using the Dark Site Skin.<a href="file:///C:/Users/jeanpaul/Desktop/websites/index.html">Click Here to use the Light Site Skin</a> </center> </div> </body> </html>取代width: 100%;，而应使用.table_ellipsis。

工作示例here：

＆＃13;

width: auto;

＆＃13;

.resumeStyleStandardTableRow25 {
    display: table-row;
}

.resumeStyleStandardLabels25 {
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.resumeStyleStandardLabelContent25 {
    direction: ltr;
    display: table-cell;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

.table_ellipsis {
    display: table;
    table-layout: fixed;
    width: auto;
}

.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;

    width: 75px;
}

.resumeStyleFinishDateLabel25 {
    background-color: #fff;
    color: #000;
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;

    background-color: lime;

}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumeStyleDateFinishContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;


}

.ellipsis_finishDate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    background-color: yellow;
}

＆＃13;

制作div CSS＆＃34; display：table-cell＆＃34;只有与div中的文本一样宽

2 个答案: