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

Question

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

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

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

CompanyName: This company is very good in doing thi.....

我的代码：

<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：link to jsfiddle 您还可以看到我之前在这个 jsfiddle 上的尝试。

Answer 1

您应该在 .spanDescription class 上使用 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，这样它将保持在一行中。

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

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

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

CSS Ellipsis only for last item, items are dynamic and inline

html

css

ellipsis