Question

我有一个单行固定宽度容器div，里面有两个可变宽度span。第一个span的溢出应该用省略号隐藏。第二个span浮在右边，应该完整显示。请参阅this Fiddle：

<div class='container'>
  <span class='left'>Long long variable stuff</span>
  <span class='right'>Changing stuff</span>
</div>

我希望第一个span的宽度根据第二个span的宽度动态调整，以便span都保持在同一条线上。我怎么能这样做？

Answer 1

您可以使用Flexbox，flex: 1 .right .left，.container { width: 200px; display: flex; border: 1px solid black; } .left { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .right { flex: 1; white-space: nowrap; }将调整其大小并隐藏溢出。

<div class='container'>
  <span class='left'>Long long variable stuff</span>
  <span class='right'>Changing stuff</span>
</div>

 $("a.editstatusclass").on("click", function () {
          //  $("#ComplainStatusID").css('display', 'none');
           // $("#ComplainStatusinputID").css('display', 'block');
              $(this).closest("tr").find("#ComplainStatusID").css('display', 'none');
           $(this).closest("tr").("#ComplainStatusinputID").css('display', 'block');

        });

Answer 2

我认为没有任何方法可以让CSS动态地知道没有javascript的元素的长度。如果您正在寻找一个纯CSS解决方案，您需要给它一些方向，以便它知道您想要的宽度。从视觉上看，这对您来说可能有点妥协，但它可以让您确保一切都在一条线上。

对于我即将建议工作的解决方案，您需要知道两者的一个宽度。在这种情况下，我会说你可以最好地猜测右边的“变化的东西”。

您的第一个问题是默认情况下跨度是inline个元素 - 而不是inline-block。为了使溢出文本属性起作用，您需要将其与inline-block或block元素一起使用。

下一部分是使用calc。 Calc除了混合测量之外，因此您可以从百分比中减去精确的像素值。这对于响应式布局非常有效。

我已经创建了一个更新版的plunker来说明： https://jsfiddle.net/n19ddahb/5/

动态宽度float-left，带省略号

2 个答案: