CSS省略号仅适用于最后一项，项目是动态和内联的

Question

我搜索了很多，但找不到任何我面临的问题。它看起来可能与其他类似但请在投票前阅读。

这是我修复它的第三个实现（之前尝试过ul-li）。我需要在一行中显示类似下面的内容（必须！）和最后一部分，即，如果它更长，则描述应显示为省略号，但是，CompanyName应始终显示为full。我的容器宽度是310px。

约束：CompanyName和Description都是动态的，它们必须在包装器内，即相同的行（宽度：大约310px）。说明文字必须使用所有宽度（使用最大宽度或宽度修复此问题）。

它使用最大宽度或宽度工作，但问题是内容是动态的，如果CompanyName很短而且Description很长或反之亦然那么就会有问题，即描述应该在省略号出现之前到行尾。这就是为什么我因为内容的动态特性而使用宽度或最大宽度修复问题的原因。

• 公司名称：这家公司做得很好.....

我的代码：

<div id="wrapper">

<div class="bullet">
    <span class="classBullet"></span>
</div>
<div class="company">
  <span class="spanCompany">Microsoft Long Company:</span>
</div>
    <div class="description">
  <span class="spanDescription">Windows 10 is a ok operating system with occassional bugs and problems otherwise it is a good OS</span>
</div>

CSS：

div.bullet{
  float:left;
  display:inline-block;
  margin-left:10px;
}

.classBullet:before{
  content:"*";
  color:black;
}
.company{
   float:left;
   display:inline-block;
   padding-right:5px;
}
.spanCompany{
   font-weight:bold;
 }
.description{
   float:left;
   display:inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;    
}

Jsfiddle链接：link to jsfiddle您还可以看到我之前尝试过这个jsfiddle。我希望得到一些好的建议。提前致谢。

Answer 1

您应该在.spanDescription类上使用text-overflow属性，因此当它溢出.description容器时，它将显示省略号。

然后你只需要按照你需要的方式调整描述容器的宽度。

对于宽度，您可以使用flexbox。在公司周围制作一个容器，并在描述中添加display：flex;它应该工作。像这样：

div#wrapper{
  width:430px;
  border-style:solid;
  height:20px !important;
}

#inner-wrapper {
  display: flex;
}

div.bullet{
   float:left;
  display:inline-block;
  margin-left:10px;
}

.classBullet:before{
  content:"*";
  color:black;
}
.company{
  float:left;
  display:inline-block;
  padding-right:5px;
}
.spanCompany{
  font-weight:bold;
  white-space: nowrap;
}
.description{
  float:left;
  display:inline-block;
   overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
}

.spanDescription {
  text-overflow: ellipsis;
}

<div id="wrapper">
  <div class="bullet">
    <span class="classBullet"></span>
  </div>
  <div id="inner-wrapper">
    <div class="company">
      <span class="spanCompany">Microsoft Long Company:</span>
    </div>
    <div class="description">
      <span class="spanDescription">Windows 10 is a ok operating system with occassional bugs and problems otherwise it is a good OS</span>
    </div>
  </div>
</div>

你还需要添加white-space：nowrap; .spanCompany所以它将保持一行。

你可以删除一些像.description中的css我刚刚添加了这个工作所需的css。

希望这可以帮助。

干杯，莫

编辑：在这种情况下＃inner-wrapper只是因为子弹，删除子弹和内包装可能是一个更好的主意，使用包装器作为flexbox并添加一些填充和子弹作为::在伪元素之前。只是一个想法，子弹容器可能也有一个简单的方法，但我只是想举例说明如何使其工作。