CSS Ellipsis 仅用于最后一个项目，项目是动态和内联的答案

【问题标题】：CSS Ellipsis only for last item, items are dynamic and inlineCSS Ellipsis 仅用于最后一个项目，项目是动态和内联的
【发布时间】：2018-08-14 14:19:15
【问题描述】：

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

约束：CompanyName 和 Description 都是动态的，它们必须在包装内，即同一行（宽度：ca. 310px）。描述文本必须使用所有宽度（使用最大宽度或宽度解决此问题时遇到了很大问题）。

它使用 max-width 或 width 工作，但问题是内容是动态的，如果 CompanyName 很短而 Description 很长，反之亦然，那么就会有问题即，描述应该在省略号出现之前到行尾。这就是为什么由于内容的动态特性，我在使用 width 或 max-width 时遇到问题。

CompanyName: 这家公司做得很好.....

我的代码：

<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 上的尝试。

【问题讨论】：

如果我错了，请纠正我，但您需要做的是切断文本并在超过 310 像素时显示省略号？
@Callat 不使用宽度怎么办？
我不会使用特定的宽度，我会按字符长度，然后使用 javascript 检查文本长度以及是否超出字符拼接。
抱歉，我的第一个实现是使用 JavaScript。我不能使用它:-(

标签： html css ellipsis

【解决方案1】：

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

那么你只需要按照你需要的方式调整描述容器的宽度即可。

对于宽度，您可以使用弹性框。在公司周围做一个容器，描述添加 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>

您还需要添加空格：nowrap;到 .spanCompany，所以它会保持在一行中。

您可能会删除一些 css，例如 .description 我刚刚添加了它工作所需的 css。

编辑：在这种情况下，#inner-wrapper 只是因为项目符号，最好删除项目符号的东西和内部包装，使用包装作为 flexbox 并在左边添加一些填充和项目符号作为 ::before 伪元素。只是一个想法，子弹容器可能也有一种简单的方法，但我只是想举一个简单的例子来说明如何让它工作。

【讨论】：