Menu
I have this HTML
<div class="link">
<i class="icon" />
<div class="text-wrapper">
<span class="label">Some label which can span at most 2 lines</span>
<span class="subtext">(optional)</span>
</div>
</div>
One way of displaying is:
Notice how the label wraps to the second line while the subtext is trailing behind it.
The other way of display is:
Notice how the label here is not long enough to wrap, but the subtext is still on the second line.
Can anyone suggest how I can achieve the above with HTML/CSS only? Feel free to ignore the icon in the solution. I have that already. Thanks in advance.
The code I have so far...
.link {
position: relative;
font-size: 0.875rem;
padding-left: 26px;
text-align: left;
line-height: 1.25rem;
}
.icon {
padding: 0;
width: 18px;
height: 18px;
font-size: 18px;
border-radius: 50%;
transform: translateY(2px);
position: absolute;
top: 0;
left: 0;
}
.label {
margin-right: 4px;
color: #007dbb;
}
.subtext { color: #686868; }
510
We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.
There are a few ways to do it with pure CSS. Let's learn how to achieve that. The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time.
To create line breaks in HTML, use the <br> tag. There is no closing tag necessary. In the code above, there will be a line break between "125 N 6th St" and "Brooklyn, NY 11249" that won't have the outrageous amount of space that appears between two paragraph elements. It'll just be a nice line break!
To affect only the first paragraph in an article, you can add the :first-of-type pseudo-class, as in this example. Style the first line of the element's text if it is the first of its type. Type the selector (article p) for which you want to style the first letter, a colon (:), and then first-line.
Set the first span as display: block; (see css for label-element). That will display the first span as a block element, forcing the second span to begin on a new line.
.link {
position: relative;
font-size: 0.875rem;
padding-left: 26px;
text-align: left;
line-height: 1.25rem;
}
.icon {
padding: 0;
width: 18px;
height: 18px;
font-size: 18px;
border-radius: 50%;
transform: translateY(2px);
position: absolute;
top: 0;
left: 0;
}
.label {
display: block;
margin-right: 4px;
color: #007dbb;
}
.subtext { color: #686868; }<div class="link">
<i class="icon">Icon</i>
<div class="text-wrapper">
<span class="label">Some label which can span at most 2 lines</span>
<span class="subtext">(optional)</span>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
