css - 如何在不使用 JS 的情况下删除 flexbox 表末尾的空格？

Question

所以我目前正在使用 flexbox 来保存一个包含来 self 的数据库的信息的表，但我正在努力使最后一列缩小以适合内容。具体来说，我想将整个最后一列缩小到最大单元格内容的宽度。

Here's the table

如您所见，每行末尾有很多空格，我想减少它。我目前的做法是

.flex-table-row-item:last-of-type {
    flex: 0;
}

这会导致每行 (.flex-table-row) 中的最后一个单元格 (.flex-table-row-item) 缩小到内容大小。但这会导致每一行独立于其他行收缩最后一列，并导致 lots of misalignment .

相关代码如下:

CSS

.flex-table-label {
    font-size: 1.3em;
    margin: 1em 0;
    padding: 8px 12px;
}

.flex-table {
    display: flex;
    margin-right: 20px;
    margin-bottom: 40px;
    flex-flow: column nowrap;
    justify-content: space-between;
    border: 1px solid #dfdfdf;
    background-color: #ffffff;
}

.flex-table-row {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.flex-table-row:nth-of-type(even) {
    background-color: #f9f9f9;
}

.flex-table-row-item {
    padding: 8px 10px;
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    padding: 0.5em;
    word-break: break-word;
    white-space: nowrap;
}

/* .flex-table-row-item:last-of-type {
    flex: 0;
} */

.flex-table-header {
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.flex-table-row-name-link {
    font-weight: 600;
}

.flex-table-row-checkbox {
    padding: 0 3px;
    flex-grow: 0;
    align-items: center;
}

.flex-table-row-checkbox input {
    margin: 0 0 0 8px!important;
}

.flex-table-row-name img {
    margin: 1px 10px 0 0;
    height: 32px;
    width: 32px;
}

表壳 (PHP)

<div class="flex-table">
    <h2 class="flex-table-label">Small Profiles</h2>
    <div class="flex-table-row flex-table-header">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item"><a>Name</a></div>
        <div class="flex-table-row-item">Title</div>
        <div class="flex-table-row-item">Rearrange</div>
    </div>
    <?php
    // Fetch data from database to put into table
    $statement = $db->prepare("SELECT * FROM `".TEAM_DB."` WHERE 
       `enlarge`=0 ORDER BY `list_order`");

    $statement->execute();
    $statement->setFetchMode(PDO::FETCH_ASSOC);
    while ( $row = $statement->fetch() ) {
        // generate_profile_list_item() creates a row in the table.
        // Called for each entry in database.
        // See below for function
        echo generate_profile_list_item($row['name'],$row['title'],$row['imgsrc'],$row['position']);
    }
    ?>
    <div class="flex-table-row flex-table-header">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item"><a>Name</a></div>
        <div class="flex-table-row-item">Title</div>
        <div class="flex-table-row-item">Rearrange</div>
    </div>
</div>

组合表格行的函数 (PHP)

function generate_profile_list_item($name, $title, $imgsrc, $pos)
{
    ob_start();
?>
    <div class="flex-table-row">
        <div class="flex-table-row-item flex-table-row-checkbox">
            <input type="checkbox" name="select-checkbox"/>
        </div>
        <div class="flex-table-row-item flex-table-row-name">
            <img src="<?php echo "../../".$imgsrc ?>" />
            <a class="flex-table-row-name-link"><?php echo $name ?></a>
        </div>
        <div class="flex-table-row-item flex-table-row-title"><?php echo parse_title($title,3) ?></div>
        <div class="flex-table-row-item flex-table-row-rearrange">
            <i class="material-icons">keyboard_arrow_up</i>
            <i class="material-icons">keyboard_arrow_down</i>
        </div>
    </div>

<?php
    return ob_get_clean();
}

这在 JQuery 中很容易做到，但我希望这可以在纯 CSS 中解决。

Answer 1

您可以使用 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space元素上的空白选择器 white-space: pre-line;。