消除跨度换行而不将文本移动到新行

Question

我现在有这个：

＆＃13;

＆＃13;

 #outer-div {
      border: 1px dashed red;
      line-height: 50px;
      width: 350px;
    }
    
    .inner-div {
      border: 1px dashed red;
      float:left;
      height: 50px;
      width:80px;
    }
    #title {
      /*white-space: nowrap;*/
    }

＆＃13;

  <div id="outer-div">
      <div class="inner-div"></div>
      <div class="inner-div"></div>
      <span id="title">Random long text not to break<span>
    </div>

＆＃13;

＆＃13;

＆＃13;

看起来像：

我需要这个：

尝试了其他线程的解决方案，但它们不能正常工作。 white-space: nowrap将整个范围移动到下一行。

这是一个有效的代码：https://codepen.io/neptune01/pen/ppMyEQ

这可以仅使用css完成吗？

Answer 1

这有点棘手，但可以使用Flexbox（几乎所有内容），DegreesC = 5*((double)DegreesF-32)/9; ，是的，text-overflow: ellipsis：

加分：您不需要white-space: nowrap或line-height。

＆＃13;

＆＃13;

float

＆＃13;

#outer-div {
  border: 1px dashed red;
  width: 300px;
  display: flex;
  align-items: center;
}

.inner-div {
  border: 1px dashed red;
  height: 50px;
  width: 80px;
  flex-shrink: 0;
}

#title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  border: blue dashed 1px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用white-space: nowrap和text-overflow: ellipsis以及overflow: hidden一起执行此操作，#title范围也需要显示为block，或者您可以只需使用另一个div代替：

#outer-div {
  border: 1px dashed red;
  line-height: 50px;
  width: 350px;
}

.inner-div {
  border: 1px dashed red;
  float: left;
  height: 50px;
  width: 80px;
}

#title {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div id="outer-div">
  <div class="inner-div"></div>
  <div class="inner-div"></div>
  <span id="title">Random long text not to break</span>
</div>

Answer 3

仅将id分配给您的parent div，而不是分配给其中的其他元素。

white-space:nowrap使应用div中的内容不会wrap他们next line，因此您还需要添加overflow:hidden，这会使内容溢出{{1}以外}或目标div，因此这会隐藏内容，然后应用.title来获取溢出内容结尾的text-overflow:ellipsis。

＆＃13;

＆＃13;

(...)

＆＃13;

#outer-div {
  border: 1px dashed red;
  line-height: 50px;
  width: 350px;
}

.inner-div {
  border: 1px dashed red;
  float: left;
  height: 50px;
  width: 80px;
}

.title {
  display: block; /*Changed display to block*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

＆＃13;

＆＃13;