CODEWITHSUNDEEP
csstext
Darwin
Darwin

Reputation: 2037

How i can show multi lines in one line?

I want keep 3 text in one line by float in css but after text 2,text 3 shows in next line. I want show part of text 3 in first line.

<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>

Upvotes: 0

Views: 328

Answers (2)

Ronald
Ronald

Reputation: 322

Float is not ment to do these kind of things, it's ment to "float" an image next to text like this:
(source: html.net)

A better solution would be to use:

.a1 {
    display: inline-block;
}

if you want to force it all to be on 1 line, create a parent element that has this css on it.

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

You can't do that with floats or any elements that are block-level display type, that's not the way the line box model works. You need to use inline elements like span tags.

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

Upvotes: 1

Related Questions