Text wrapping around a word icon inside an h3 tag
I am trying to align the text so that the text doesn't go around this icon. I am having problems because my icon and my text are inside the h3 tag and anchor and I am using spacing. The typical ways for this, I usually do this job, will not work because I use spacing and because the icons and text are inside h3 and anchors.
What I'm looking for
icon Test test test test test test
Test test test test test test
What I get is
icon 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>
<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></a></h3>
source to share
You can set the anchor and range display to a 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>
source to share
The simplest solution is to apply display: flex;
to h3 > a
and remove text-align: right
from .textalignleft
. This will create two blocks of equal height inside a
inside h3
:
Edited snippet after comment and modified question:
.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: left;
padding-left: 5px;
}
h3 > a {
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>
<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></a></h3>
source to share