一行中的单个灵活列

Question

我必须达到的要求很少：

1. 标题（深灰色部分）无论如何都必须是一行，在末尾加点点

2. 较暗的灰色部分必须灵活，因为较浅的灰色部分必须显示全文和一行。

   <div width="100%">
       <div class="left">flexible, assume this is a title</div>
       <div class="right">must remain one line no matter what</div>
   </div>
   
   .left{
       background:grey;
       width:50%;
       float:left;
    }
   .right{
       background:lightgrey;
       width:50%;
       float:right; 
   }
   

我的案例的挑战是没有固定的宽度可以使用，我需要js来做一些计算吗？

Answer 1

将这些样式添加到.left类

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

如果文字太长，这些会阻止包装并显示...样式。