1. Single line text
Set the height of the div to the row height of the text, that is, the line-height and height values are the same, and finally give the div an over-flow: hidden, hide the excess parts.
This method supports block-level and inline polar elements as well as all browsers, but only one row can be displayed, and IE does not support center of , so overflow: hidden is used, the reason is that when the user zooms in the font, the word is out of the div range.
| The code is as follows: |
Copy code |
Div { Height: 20px; Line-height: 20px; Overflow: hidden; }
|
2. Multi-line text
It's easy to set the same padding-bottom and padding-top.
| The code is as follows: |
Copy code |
Div { Padding-top: 20px; Padding-bottom: 20px; }
|
This method supports both block-level and inline polar elements and non-text content, including images, and all browsers.
Now there are two methods that are quite easy to use. Of course, you can also use the CSS hack of the browser, which is rarely used.