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％并且它仍然有用。）

＆＃13;

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

＆＃13;

<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>

＆＃13;

省略流体宽度

1 个答案: