This is done when you need to fit text within a small amount of space. Easy way is to set the container to a fixed height and then do overflow: hidden;. There is a library that can automatically add ellipsis and also make the longer text available for screen-readers. See Shave.
In traditional typography, leading is the amount of space between lines of text. On the web, we use the CSS property line-height to adjust the leading. In the first column below, the line-height has been set to 0.5, which is causing the text to overlap.
In this paragraph, the line-height has been set to 0.5. You can see that the text is overlapping itself, which could be a great way for some specially display text effects. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. There is a 50 px tall graphic appearing now: |
In this paragraph, the line-height has been set to 1.0. You can see that the text is tightly packed with no overlapping or gaps. The relation of the font-size property to what you actually see rendered is determined by the font's designer. This relationship is set as an em square (some call it an em box) within the font itself. This em square, and thus the font size, doesn't have to refer to any boundaries established by the characters in a font themselves. Instead, it refers to the distance between baselines when the font is set without any extra leading (line-height in CSS). It is quite possible for fonts to have characters that are taller than the default distance between baselines. For that matter, a font might be defined such that all of its characters are smaller than its em square. |
In this paragraph, the line-height has been set to 1.8. The leading is a bit too much to make this paragraph easy to read. This website has the line-height set to 1.4, which works for most body text sized fonts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at. |
You can use the standard units for specifying the line-height, such as:
p {
font-size:14px;
line-height:16px;
}
In this example, the height of the font is 14px and there is a 2px leading (16-14=2). You’ll notice that we can’t directly specify the leading, instead it is derived from the line height and font size.
Keep in mind, individual lines of text can have a larger line height than what you specify in order to contain all the content. For example, in the first column above there is a 50px tall graphic place inline with the text. For that line, the height is 50px.
Eric Meyer explains that it is better to not include a unit when specifying the line height. The line’s overall height is a ratio when a unit is not specified for line-height. For example, if you font-size is 24px and you want 5px leading, the line height will be 1.2083=(24+5)/24
The baseline is the invisible line that all characters sit on. The baseline will be positioned such that the line's text will be centered vertically within the line height (as demonstrated by LINE TWO). All the examples below have their line-height set to 4.
LINE ONE abcdefghijklm smaller larger
vertical-align:middle
LINE TWO abcdefghijklmnopqrstuvwxyz
LINE THREE line-height:75px;
vertical-align:baseline
LINE FOUR abcdefghijklmnopqrstuvwxyz
LINE THREE is interesting because the baseline shifted because the 75px image has vertical-align:top applied to it. Honestly, I’m still trying to wrap my head around that one; change the line-height to 13 and take a look – mind blown.