来自不同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: inline和inline-block div中使用first或second。

＆＃13;

＆＃13;

.general {
  max-width: 200px;
}

.first,
.second {
  display: inline;
}

＆＃13;

<div class="first_sample general">
  <div class="first">Hello My name is </div>
  <div class="second">something else</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用white-space:nowrap;属性。

.general {
    background: #ebeff1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 16px;
    max-width: 205px;
    display: flex;
}
.first {
    margin-right: 7px;
    white-space:nowrap;
}

.second {
    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>

Answer 3

.general {
    background: #ebeff1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 16px;
    max-width: 405px;
    display: inline-block;
}

Answer 4

请参阅下面的解决方案

只需将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>