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>

Answer 2

只需在您的first和second divs中使用display: inline或inline-block。

.general { 
 
    max-width: 200px; 
 
} 
 

 
.first, 
 
.second { 
 
    display: inline; 
 
}

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

Answer 3

可以使用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 4

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