来自不同 div 的 CSS 文本流动

Question

假设我有以下 div:JSFIDDLE

<div>
  <div class="first">Hello My name is </div>
  <div class="second">Something else</div>
</div>

在最大宽度下，first 部分和second 部分分开到下一行。有没有办法让单词彼此相邻？

Answer 1

查看下面的解决方案

只需将 display:table; 添加到 .genral 和 display:table-cell; 和 white-space:nowrap; 到 .first, .second

.general {
    background: #ebeff1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 16px;
    max-width: 205px;
    display: table; /*Changed*/
}
.first {
    margin-right: 7px;
}

/*New Added*/
.first, .second{
   display: table-cell;
   white-space: nowrap;
}
   
p.pp {
    font-size: 24px;
}

<p class="pp">
   When overflow, the words go to next line: Not good.
</p>
    <div class="first_sample general">
      <div class="first">Hello My name is </div>
      <div class="second">something else</div>
    </div>
    
<p class="pp">
   If there is a space, then words simply flow to next each other: Good.
</p>
    <div class="second_sample general">
      <div class="first">Hello My name is </div>
      <div class="second">something</div>
    </div>
    
<p class="pp">
    The look I am trying to achieve:
</p>
    <div class="third_sample general">
      <div class="first">Hello My name is something else </div>      
    </div>