Text wrapping around icon with spans inside of h3 tag

233
June 15, 2017, at 08:15 AM

I am trying to get my text to align so that the text does not wrap around this icon. I am having trouble because my icon and my text are inside of an h3 tag and an anchor and I am using spans. The typical ways for that I would usually make this work will not work because I am using spans and because both the icons and the text are inside of h3 and anchors.

What I am looking for is

icon Test test test test test test
           Test test test test test test

What I am getting is

icon Test test test test test test
Test test Test test test test test test

.ui-accordion .ui-accordion-header { 
  display: block; 
  cursor: pointer; 
  position: relative; 
  margin: 2px 0 0 0; 
  padding: .5em .5em .5em .7em; 
  min-height: 0; 
  font-size: 100%; 
} 
 
.fa-plus::before { 
  content: "\f067"; 
} 
 
.textalignleft { 
  overflow: hidden; 
  text-align: right; 
}
<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
  <a href="javascript:void(0)"> 
    <span class="fa fa-plus fc-iconspace"></span> 
  </a> 
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></h3>

http://jsfiddle.net/upKGe/650/

Answer 1

You can set the display of the anchor and span to table-cell:

.ui-accordion .ui-accordion-header { 
  display: block; 
  cursor: pointer; 
  position: relative; 
  margin: 2px 0 0 0; 
  padding: .5em .5em .5em .7em; 
  min-height: 0; 
  font-size: 100%; 
} 
 
.fa-plus::before { 
  content: "\f067"; 
} 
 
a, 
.textalignleft { 
  display: table-cell; 
}
<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
  <a href="javascript:void(0)"> 
    <span class="fa fa-plus fc-iconspace"></span> 
  </a> 
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></h3>

Answer 2

The easiest solution is to apply display: flex; to the h3 and erase the text-align: right from .textalignleft. That will create two blocks of equal height inside the h3:

.ui-accordion .ui-accordion-header { 
  display: block; 
  cursor: pointer; 
  position: relative; 
  margin: 2px 0 0 0; 
  padding: .5em .5em .5em .7em; 
  min-height: 0; 
  font-size: 100%; 
} 
 
.fa-plus::before { 
  content: "\f067"; 
} 
 
.textalignleft { 
  overflow: hidden; 
} 
 
h3 { 
  display: flex; 
}
<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0"> 
  <a href="javascript:void(0)"> 
    <span class="fa fa-plus fc-iconspace"></span> 
  </a> 
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></h3>

Rent Charter Buses Company
READ ALSO
SVG animation is not working on IE11

SVG animation is not working on IE11

I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure

1623
Bootstrap- Page layout Issue in using Bootstrap columns

Bootstrap- Page layout Issue in using Bootstrap columns

I use Bootstrap columns for styling my pageI have 4 main div in my row and I expect them to display in a row but they aren't and also a scroll-bar are inserted in the bottom of the page

328
How can i center this second nav bar in marerializecss?

How can i center this second nav bar in marerializecss?

i have a navigation bar i made using MaterializeCSS and i was wondering how to center the bottom oneHere is my code:

270
Character jump script javascript platform game

Character jump script javascript platform game

Probably my third or fourth post on this subject, thanks for the help so far

396