Question

我有一个案例，我试图用纯CSS解决，但我觉得它不可能（或者至少不使用表格）。

想象一下以下布局

<div class="parent">
  <span class="name">
    Some name
  </span>
  <span class="number">
    123
  </span>
</div>

我希望parent具有固定宽度，然后让name跟随number内联。但是，如果name太长，我希望它截断（使用省略号），但number应该保留并向右移动，直到它到达parent的边界

以下几个例子可供说明。

Short text 1       |
Longer text 12     |
Very, very lon..123|

请注意，number文本也可以有可变长度（因此宽度无法修复）。

有什么想法吗？

Answer 1

CSS Flexbox布局很好地使这种事情变得轻而易举。您可以在the MDN article "Using CSS Flexible Boxes"上阅读有关使用它的详细信息，但这是一个简单的示例，说明它如何解决您的布局：

.parent {
    display: flex;
    width: 8em;
}

.name {
    /* Make width shrinkable beyond width of content */
    flex: 0 1 auto;

    /* Make sure text doesn't wrap or push beyond element boundaries */
    overflow: hidden;
    white-space: nowrap;

    /* Show an ellipsis when text cuts off */
    text-overflow: ellipsis;
}

.number {
    /* Make width inflexible */
    flex: 0 0 auto;
}

您可以在this example JSBin中看到它。

CSS：截断左侧文本，但在截断后保持正确

1 个答案: