Question

jsfiddle

.nowrap {
    overflow: hidden;
    white-space: nowrap;
    /*width: 300px;*/
    text-overflow: ellipsis;
}

.body {
    color: #777;
}

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    text-align: left;
}

<table>
    <thead>
        <tr>
            <th>From</th>
            <th>Subject/Body</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
            <td><div class="nowrap"><span class="subject">Lorem Ipsum</span>
                <span class="body"> &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt aliquet libero quis tempus. Vivamus id est purus. Nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. Nullam non dolor tincidunt, mattis metus ac, feugiat sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mollis leo in tristique consectetur. Quisque non imperdiet neque. Nunc fermentum neque sit amet nulla interdum vestibulum. Sed ac tempus dolor.</span></div>

            </td>
        </tr>
    </tbody>
</table>

如何将主体/主体保持在一条线上，末端带有椭圆，而不固定容器的宽度？

如果无法使用省略号，我至少如何避免使用省略号？

Answer 1

为防止表格单元格中的省略号溢出，您可以将<table>设置为table-layout:fixed和width:100%，并在第一列设置固定/百分比宽度。

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
th:first-child {
    width: 50px;
}

＆＃13;

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
th, td {
    border: 1px solid black;
    text-align: left;
}
th:first-child {
    width: 50px;
}
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

＆＃13;

<table>
    <thead>
        <tr>
            <th>From</th>
            <th>Subject/Body</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
            <td>
                <div class="ellipsis">
                    <span class="subject">Lorem Ipsum</span>
                    <span class="body"> &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt aliquet libero quis tempus. Vivamus id est purus. Nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. Nullam non dolor tincidunt, mattis metus ac, feugiat sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mollis leo in tristique consectetur. Quisque non imperdiet neque. Nunc fermentum neque sit amet nulla interdum vestibulum. Sed ac tempus dolor.</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

<强> JSFiddle Demo

对于自适应表格布局，您可以使用两个<div>，并将它们分别设置为table和table-cell，以及以下样式。

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.ellipsis {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

＆＃13;

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    text-align: left;
}
.shrink {
    white-space: nowrap;
}
.expand {
    width: 99.999%;
}
.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.ellipsis {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

＆＃13;

<table>
    <thead>
        <tr>
            <th class="shrink">From</th>
            <th class="expand">Subject/Body</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="shrink">Mark</td>
            <td class="expand">
                <div class="container">
                    <div class="ellipsis">
                        <span class="subject">Lorem Ipsum</span>
                         <span class="body"> &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt aliquet libero quis tempus. Vivamus id est purus. Nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. Nullam non dolor tincidunt, mattis metus ac, feugiat sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mollis leo in tristique consectetur. Quisque non imperdiet neque. Nunc fermentum neque sit amet nulla interdum vestibulum. Sed ac tempus dolor.</span>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

<强> JSFiddle Demo

如何在不修复宽度的情况下添加椭圆？

1 个答案: