See If the link text is wrapped 2 lines using jQuery?
I have the CSS and HTML below. I have a menu where lis is a given height and width and has a relative position. The links within them are positioned absolutely in order to take up all the available space so that the entire li is clickable. So far so good.
The problem is that the amount for the text link may differ. When the link text is wrapped 2 lines (e.g. 2nd link) I want less vertical padding. I would add a class to the second link for this, except that the solution needs to be dynamic and with javascript. The menu can change so that the first link has more text and wrap by 2 lines, in which case I would also need to remove its vertical padding. I need this to happen without changing the code.
I started looking for a solution using jQuery. I tried to measure the height of the link, so if it was higher than the "x" I could add a class that removed the vertical padding. However, this won't work as the height is set by absolute positioning.
Is there any other way to measure if the text is wrapped by 2 lines? I could count the number of characters, but this doenst seems to be so reliable that some characters take up more width than others.
Will this work if I add a space to the link containing the text? Then, presumably, the link can still be absolutely positioned and its range can be measured in height?
<li>
<a href="#">Link1</a>
</li>
<li>
<a href="#">Link 2 with long text</a>
</li>
<li>
<a href="#">Link3</a>
</li>
li {
display: block;
float: left;
position: relative;
text-align: center;
width: 83px;
min-height: 53px;
background-color: grey;
margin-right: 5px;
}
a {
padding-top: 13px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
}
UPDATE. I need to support IE7.
source to share
I solved it by using jQuery to insert scrolling over link text. JQuery then measures the height of the span and applies padding to its li as needed.
This is probably not the best solution from a responsive point of view and if users resize the browser, but it works for me and it is just a design issue, not the end of the world if it goes wrong.
source to share
No need to use JS here.
Allows you to slightly change the HTML structure. I linked the content of the link in span
. We will vertically align these spacing instead of tags a
.
<li>
<a href="#" class="valign"><span class="valigned">Link 2 with long text</span></a>
</li>
I rendered the basic CSS that turns the trick into two separate classes .valign
(for the parent) and .valigned
(what needs to be focused).
source to share