Home > Developer > Web Develop
CSS Div Layout in the presence of one or more lines of text in each line of text content can not be displayed, up and down line text has a little overlap phenomenon, text font only show half of the solution, in the low version of IE especially obvious text font display, in the browser and other high-version IE browser test is better.
Novice layout When special love appears in the div box text font display is incomplete, music sofa even up and down the line of text has a little overlap phenomenon.
CSS font text overlaps display incomplete overlapping fonts
Font text overlap Display is not complete with overlapping coincident effect
In the DIV+CSS layout caused this font display is not complete, the music sofa display half the same time multiline text has a little overlap situation reason:
CSS line height is less than CSS font size
Meaning: Setting the font text size value in the CSS layout is greater than the line height value.
The above corresponding HTML code:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<TITLE>DIVCSS5 examples </title>
<style>
. divcss5{line-height:16px;font-size:22px}
</style>
<body>
<div class= "DIVCSS5" >
Test content display not finished content music sofa <br/>
DIVCSS5 instance text displays half <br/>
DIVCSS5 instance text does not display full
</div>
</body>
See "class=" DIVCSS5 "" corresponding to the CSS settings line high CSS Line-height set 16px, and font size CSS font-size set to 22px, the obvious font size of 22px is greater than the CSS line high 16px.
Workaround:
This case if the font size does not change, set the value of Line-height to be greater than or equal to 22px to resolve
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<TITLE>DIVCSS5 instance body feel music sofa </title>
<style>
. divcss5{line-height:22px;font-size:22px}
</style>
<body>
<div class= "DIVCSS5" >
The content of the test is not finished <br/>
DIVCSS5 instance text displays half <br/>
DIVCSS5 instance text does not display full
</div>
</body>
The value of the code line-height here is set to 22px music sofa (just set line-height greater than or equal to 22px), exactly the same as the font size value. This will be a good way to solve the overlapping overlap of multiple lines of text and also resolve the font display is incomplete.
div CSS resolves font display not complete, overlapping phenomenon
CSS Resolution font display is incomplete, overlapping phenomenon
Summarize:
The ultimate simplest solution to the div CSS layout in the multi-line text display is not all overlapping problems, the simplest way to set the value of Line-height is greater than or equal to the font size value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
