CSS表单元格对齐和省略号不起作用 [英] CSS table cell alignment and ellipsis not working

查看：57
本文介绍了CSS表单元格对齐和省略号不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一些未隐藏的HTML代码，无法使用CSS省略号将其截断.

I have some HTML code that is not hidden and cut off using the CSS ellipsis.

我已经尝试了很多方法来解决此问题，但是对我来说没有任何用处(这使我无法解决这样一个简单的问题，这真是使我丧命).我已经阅读了有关CSS省略号的所有SO帖子.

I have tried many things to fix this issue, but nothing works for me (and it is killing me I cannot fix such a simple issue). I have read all the SO posts about the CSS ellipsis.

以下是我所拥有的视觉呈现:

Here is a visual representation of what I have:

如图所示， 11/2001(2 annees，10 mois)放到下一行，省略号无效.

As shown the 11/2001 (2 annees, 10 mois) is dropped to the next line and the ellipsis does not take effect.

我试图将 11/2001(2次退火，10 mois)保留在提示完成日期旁边，并与之断开(隐藏)如果值太长，则省略号(在这种情况下).

I am trying to keep the 11/2001 (2 annees, 10 mois) next to the prompt Date d'achevement and to be cut off (hidden) with the ellipsis if the value is too long, as it is in this case.

这是我的HTML 

<div id="live_preview" class="livePreview_resumeWrapper1">
    <div class="resumeStyleWrapper25">
        <div class="resumeStyleOptimisedContainer25">
            <div class="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div>
        </div>
        <div class="resumeStyleWrapper25">
            <div class="resumeStyleStandardTableRow25">
                <div class="resumeStyleStandardContainer25">
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">employeur</div>
                        <div class="resumeStyleStandardLabelContent25">french</div>
                    </div>
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">Date de demarrage</div>
                        <div class="resumeStyleStandardLabels25">
                            <div class="resumeStyleDateStartContent25">01/2009</div>                
                            <div class="resumeStyleFinishDateLabel25">Date d'achevement</div>
                            <div class="resumeStyleDateFinishContent25">
                                <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的CSS 

.livePreview_resumeWrapper1 {
    border: 1px solid #000;
    box-shadow: 10px 10px 5px 0px #888888;
    direction: ltr;
    padding: 20px;
    width: 93%;
}

.resumeStyleWrapper25 {
    border-spacing: 0px 0px;
    display: table;
    font-family: verdana;
    font-size: 12px;
    width: 100%;
}

.resumeStyleOptimisedContainer25 {
    /* THIS CLASS ALTERNATES BETWEEN A ROW AND A NON-ROW DEPENDING ON THE STYLE REQUIREMENTS */
    background-color: #000;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}

.resumeStyleStandardHeadings25 {
    background-color: #000;
    color: #fff;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}

.resumeStyleStandardContainer25 {
    padding-left: 5px;
    width: 100%;
}

.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;
}

.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    float: left;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 20%;
}

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

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

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

有人可以指出我在做什么吗?

编辑

我已经更新了HTML&注释中要求的CSS.

I have updated the HTML & CSS as requested in the comments.

推荐答案

CSS表结构存在问题，您有一些表单元格直接位于也设置为表单元格的元素下，这是无效的.您可以将内部表格单元格元素包装到容器中，并将其设置为 display:table ，这将解决此问题.

There is a problem of the CSS table structure, you have some table cells stay directly under the element that is also set to table cell, which is invalid. You can wrapped the inner table cell elements into a container and set it as display:table, which would fix the issue.

这是此部分: 

<div class="table">
    <div class="resumeStyleStandardLabelContent25">
        <div class="ellipsis">01/2009 Date d'achevement</div>
    </div>
    <div class="resumeStyleStandardLabelContent25">
        <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
    </div>
</div>

通常，正确 CSS表的布局是这样的，但是如果只有一行，则不需要行.

In general the correct CSS table layout is like this, but row isn't needed if there is only one row.

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
            ...

在表格中使用CSS text-overflow:省略号时，它需要使用固定的表格布局，并设置了 width 值，固定值或百分比都可以很好.

When you use CSS text-overflow:ellipsis in table, it needs to work with fixed table layout, and has width value set, either fixed or percentage are both fine.

是这样的: 

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

最后一次:

从表格单元格中删除所有 float 属性，它们不能一起使用.

Remove all the float properties from the table cells, they don't work together.

以下是更新的代码段: 

body {width: 500px;} /*for demo only*/

.livePreview_resumeWrapper1 {
    border: 1px solid #000;
    box-shadow: 10px 10px 5px 0px #888888;
    direction: ltr;
    padding: 20px;
    width: 93%;
}
.resumeStyleWrapper25 {
    border-spacing: 0px 0px;
    display: table;
    font-family: verdana;
    font-size: 12px;
    width: 100%;
}
.resumeStyleOptimisedContainer25 {
    /* THIS CLASS ALTERNATES BETWEEN A ROW AND A NON-ROW DEPENDING ON THE STYLE REQUIREMENTS */
    background-color: #000;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}
.resumeStyleStandardHeadings25 {
    background-color: #000;
    color: #fff;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}
.resumeStyleStandardContainer25 {
    padding-left: 5px;
    width: 100%;
}
.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;
}
.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    /* float: left; */
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 20%;
}
.table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resumeStyleFinishDateLabel25 {
    background-color: #fff;
    color: #000;
    direction: ltr;
    display: table-cell;
    /* float: left; */
    font-weight: bold;
    padding: 2px;
    padding-right: 10px;
    text-align: left;
    vertical-align: top;
}
.resumeStyleDateFinishContent25 {
    direction: ltr;
    display: table-cell;
    /* float: left; */
    padding: 2px;
    text-align: left;
    vertical-align: top;
}

<div id="live_preview" class="livePreview_resumeWrapper1">
    <div class="resumeStyleWrapper25">
        <div class="resumeStyleOptimisedContainer25">
            <div class="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div>
        </div>
        <div class="resumeStyleWrapper25">
            <div class="resumeStyleStandardTableRow25">
                <div class="resumeStyleStandardContainer25">
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">employeur</div>
                        <div class="resumeStyleStandardLabelContent25">french</div>
                    </div>
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">Date de demarrage</div>
                        <div class="resumeStyleStandardLabelContent25">
                            <div class="table">
                                <div class="resumeStyleStandardLabelContent25">
                                    <div class="ellipsis">01/2009 Date d'achevement</div>
                                </div>
                                <div class="resumeStyleStandardLabelContent25">
                                    <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

或者，查看 JsFiddle 演示，以便您可以轻松调整框架的大小以进行检查:

Or, view the JsFiddle demo, so you can resize the frame easily to check:

在此处工作演示

这篇关于CSS表单元格对齐和省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆