Home > Article > Web Front-end > How to deal with the incomplete display of the last line of text in HTML
How to deal with the incomplete display of the last line of text in HTML
- php中世界最好的语言Original
- 2017-11-25 11:57:124897browse
In our web page, the text content in the layout exceeds the DIV or half of the display is incomplete. So how do we solve it? Today I will show you how to deal with the incomplete display of the last line of text.
How to solve the problem that the last row of text in the DIV box in the div css layout is half-displayed and incomplete? Or the last row of text content exceeds the DIV border, and how to control and choose the CSS layout of displaying and hiding the last row of content.
The last row of text exceeds the DIV border
In the layout, it often appears that the last row or multiple rows of text exceed the DIV border.
1. The complete source code of HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示不全或超出</title>
<style>
.div{ border:1px solid #000; width:200px; height:50px;line-height:20px}
</style>
</head>
<body>
<div class="div">
最后一排文字显示不完<br />
最后一排文字显示一半测试<br />
DIVCSS实例测试
</div>
</body>
</html>The last row of text in css layout is displayed beyond the DIV border
The last row of text is displayed beyond the DIV border
Reason
The above text font content is displayed beyond the DIV. It is typically a height setting error. The height of this box is 50px and the css line height is 20px. Then the three rows of text will occupy a height of 60px, but the height is set to 50px. , the natural height is 10px less, and this content overflow phenomenon will occur in higher version browsers.
4. Solution
There are four solutions to solve the problem of the last row display exceeding:
The first method is to calculate the height, and type the content in three rows. , and line-height is set to 20px, then the height is set to 3 times 20 = 60px (at least equal to or greater than 60px).
The second method is to remove the height style. If you are not sure how much content is in the DIV box, the simplest and most common method is to cancel the DIV height setting, so that the DIV will increase with the content.
The third method is to modify the line-height height. If the height in your CSS layout is fixed, and the display content is also fixed and you want to display it completely, you can only modify the value of css line-height. In this case, 50 divided by 3 = 16.6, then Setting line-height to integer16px can solve the problem of content overflowing to a fixed height.
The fourth method is to reduce the content. Three rows of content are displayed here. You only need to remove one row so that only two rows of content are displayed.
The font of the last row of text is half displayed
In many cases, in addition to the above problems in the layout, the content beyond the DIV does not overflow but is hidden and not displayed. How to solve it?
1. HTML+CSS example code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示不全或超出</title>
<style>
.div{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px}
</style>
</head>
<body>
<div class="div">
最后一排文字显示不完<br />
最后一排文字显示一半测试<br />
DIVCSS实例测试
</div>
</body>
</html>Analysis of causes of incomplete css layout text display
The above case is the same as the first overflow DIV box code, except that there is more overflow :hidden style. This "overflow:hidden" style has the content beyond the hidden DIV, so the last row of text appears incomplete or only half displayed.
Solution
The solution can be solved by referring to the previous css compatibility problem "The last row of text exceeds the DIV border".
4-1: Reduce the number of text lines (just reduce one line here)
4-2: Set the height and calculate the height
4-3: Do not set the height
4-4: When the height is fixed, calculate and modify the value of line-height
For specific methods, see the detailed solution of the problem case.
These are the solutions to the problem that the text content exceeds the DIV or half of the display is incomplete. For more exciting content, please pay attention to other related articles on the php Chinese website!
Related reading:
How to create a butterfly flying animation with CSS3
How to use canvas to create the effect of particle fountain animation
The above is the detailed content of How to deal with the incomplete display of the last line of text in HTML. For more information, please follow other related articles on the PHP Chinese website!