отображает еще один текст в одной строке

Question

Я хочу сохранить 3 текста в одной строке с помощью float в css , но после текста 2 текст 3 показан в следующей строке. Я хочу показать часть текста 3 в первой строке.

<style> 
.a1{ 
    float: left; 
} 
</style> 

<div class="a1">/11 11 11 11 11 11 1 1111 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1/</div> 
<div class="a1">/22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222/</div> 
<div class="a1">/33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3/</div> 

Answer 1

Вы не можете сделать это с помощью буев или каких-либо элементов, которые на уровне блоков display типа, что это не так, модель коробки линия работает. Вам нужно использовать встроенные элементы, такие как span теги.

span:nth-of-type(2) { 
 
    background: lightgrey; 
 
}

<span class="a1">11 11 11 11 11 11 1 1111 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1</span> 
 
<span class="a1">22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222</span> 
 
<span class="a1">33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3</span>

JSfiddle Demo

Answer 2

Float не Мента делать такого рода вещи, это Мента "поплавок" изображение рядом с текстом, как это: http://html.net/tutorials/css/figure016.gif

Лучше раствор должен был бы использовать:

.a1 { 
    display: inline-block; 
} 

Если вы хотите заставить все это быть на 1 строке, создайте родительский элемент, на котором есть этот css.

.parent { 
 
    white-space: nowrap; /* this prevents it from being on multiple lines*/ 
 
    font-size: 0; /* this prevents the space between the lines */ 
 
} 
 
.a1 { 
 
    display: inline-block; 
 
    font-size:12pt; /* set the font-size back to whatever you want */ 
 
} 
 

 

 
/* Some extra styling */ 
 
.a1:first-of-type { 
 
    color: red; 
 
} 
 
.a1:last-of-type { 
 
    color: blue; 
 
}

<div class="parent"> 
 
    <div class="a1">/11 11 11 11 11 11 1 1111 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1/</div> 
 
    <div class="a1">/22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222/</div> 
 
    <div class="a1">/33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3/</div> 
 
</div>