html - CSS Ellipsis 仅适用于最后一项，元素是动态和内联的

Question

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

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

它使用 ma​​x-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 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 并添加一些左边的填充和元素符号作为::before 伪元素。只是一个想法，子弹容器可能也有一种简单的方法，但我只是想举一个简单的例子来说明如何让它工作。