CODEWITHSUNDEEP
htmlcsslinejustify
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4853

How can I ensure that an icon will be on the same line as text, and not on a new line?

EDIT:

I got the icon to be next to the text by setting 

span{max-width:140px; display:block; float:left}

but now the text in the span is overlapping the bottom of the li; it's no longer setting the height correctly.

I have an expandable menu that has a plus/minus icon next to the text. This is what it looks like:

<li class="category expandable">
    <span>Programs and Clinics</span>
    <a href="javascript:void(0)" class="show-second-level toggle" style="display: inline;">
        <i class="fa fa-plus"></i>
    </a>
    <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
        <i class="fa fa-minus"></i>
    </a>
</li>

I want to make sure that the expand icon is always on the same line as the text, because it looks bad for it to be on its own line. If "Clinics" has to move down to the next line that's fine, but how can I make sure that the icon doesn't end up on its own below the text?

Upvotes: 4

Views: 2048

Answers (3)

emmanuel
emmanuel

Reputation: 9615

You could position image absolutely and preserve space with a margin.

.category {
  border: 1px solid #000000;
  position: relative;
  width: 140px;
}
.category > span {
  margin-right: 30px;
  display: block;
}
.category a {
  display: block;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.category i.fa {
  background: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
  width: 30px;
  height: 30px;
  display: block;
}
<li class="category expandable">
  <span>Programs and Clinics</span>
  <a href="javascript:void(0)" class="show-second-level toggle">
    <i class="fa fa-plus"></i>
  </a>
  <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
    <i class="fa fa-minus"></i>
  </a>
</li>
<li class="category expandable">
  <span>Test 2 with much longer text ... and a third row</span>
  <a href="javascript:void(0)" class="show-second-level toggle">
    <i class="fa fa-plus"></i>
  </a>
  <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
    <i class="fa fa-minus"></i>
  </a>
</li>

Upvotes: 1

Sumurai8
Sumurai8

Reputation: 20737

Wrap the entire thing that should be displayed on the same line in a block with CSS: white-space: nowrap. It will prevent the browser from wrapping inside that block. If needed it will wrap before or after that block.

div {
  width: 30px;
  height: 100px;
  background: #DDEEEE;
  border: blue dotted 1px;
}

span {
  white-space: nowrap;
}
<div>
  <span>This is a long text <i>icon</i></span> and this is outside
</div>

Upvotes: 0

The Sidhekin
The Sidhekin

Reputation: 283

If you want to keep "Clinics" and the icons together, they are the ones that should be wrapped in a span. Preferably one with white-space: nowrap. ;-)

Upvotes: 2

Related Questions