流体宽度上的省略号

Question

我在包装器中有两个 div，我希望第一个 div 的最大宽度为 65%，第二个 div 的最大宽度为 35%，第一个左对齐，第二个右对齐，都在同一行（白色-space:nowrap)，所以基本上我想要得到的是：

-----------------------------------------------------------------------
|                         |                                           |
| THIS IS IS SHORT TEXT   |               NOW THIS LINE COULD BE LONG |
|                         |                                           |
-----------------------------------------------------------------------

现在最坏的情况：

<----------------- 65% ---------------------->   <------ 35% -------->
-----------------------------------------------------------------------
|                                              |                      |
| NOW THIS LINE IS LONG AND GROW MORE CAU...   | NOW THIS LINE COU... |
|                                              |                      |
-----------------------------------------------------------------------

我需要在两个文本上显示文本溢出省略号。有什么想法吗？

Answer 1

我想你可以只使用一个左浮动的 DIV：

（请注意，最大宽度仅用于演示目的...您可以让它们达到 100%，它仍然可以工作。）

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

.outer {
  background-color: green;
  text-align: right;
}

.inner1 {
  max-width: 65%;
  float: left;
  background-color: red;
  text-align: left;
}

.inner2 {
  display: inline;
}

<div class="truncate outer" style="max-width: 500px;">
  <div class="truncate inner1">
    THIS IS IS SHORT TEXT
  </div>
  <div class="inner2">
    NOW THIS LINE COULD BE LONG
  </div>
</div>

&nbsp;

<div class="truncate outer" style="max-width: 500px">
  <div class="truncate inner1">
    NOW THIS LINE IS LONG AND GROW MORE CAUTIOUS?
  </div>
  <div class="inner2">
    NOW THIS LINE COULD BE LONG
  </div>
</div>