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

Question

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?

Probably need to change how the span works; make it a block element with a max-width. Also, perhaps use float on both elements. (I'm not a CSS guru though...) — Brad Christie, Mar 16 '15 at 19:06

score 2 · Answer 1 · answered Mar 16 '15 at 19:10

2

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

answered Mar 16 '15 at 19:10

The Sidhekin

283
1
2
7

This needs to be applicable to any title though, not just this one specifically. – Erica Stockwell-Alpert Mar 16 '15 at 19:11
@user3784238 Just make sure all your titles have `white-space: nowrap` – Ruan Mendes Mar 16 '15 at 19:14

score 1 · Answer 2 · answered Mar 16 '15 at 19:18

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>

score 0 · Answer 3 · answered Mar 16 '15 at 19:10

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>

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

3 Answers3