Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to solve the problem of displaying only half of each line of text in div css

2025-04-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly explains "div css only shows half of each line of text how to solve", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "div css only shows half of each line of text how to solve it"!

CSS DIV mechanism appears single line or multi-line ink content of each line can not be reflected in the whole, there is a little bit of ink on the upper line stacked scene, ink fonts only half flash through the door, in the low version of IE especially obvious ink font incomplete, in google browser and other high version IE reader test is better.

Proficient in construction time especially love to present DIV box text font is not incomplete, even high and low line calligraphy has a little stack situation.

Forming this type of font in the DIV+CSS structure reveals incomplete performance, showing half of the simultaneous multiline calligraphy with a little bit of stacking caused by:

CSS line height is less than CSS font size

Meaning: Sets the font size of an equipment layout in CSS organization to be greater than the line height.

The HTML code for the screenshot above:

CSS5 Instance. CSS5 { line-height:16px;font-size:22px} Test mode shows incomplete content CSS5 instance ink flash half CSS5 instance ink cannot show incomplete

See that "class="CSS5"" corresponds to CSS setting line height css line-height configuration 16px, while font size css font-size configuration is 22px, obviously font size is 22px greater than css line height 16px.

Solution: In this case, if the font size is not rotated, the line-height value configuration is greater than or equal to 22px

CSS5 Instance. CSS5 { line-height:22px;font-size:22px} Test mode shows incomplete mode CSS5 instance calligraphy appears half CSS5 instance calligraphy cannot appear incomplete

Here the line-height value is set to 22px (only if line-height is greater than 22px), which is exactly the same as the font size value. This can be a good management of multi-line ink stacking overlap scene at the same time also show incomplete font scheme.

At this point, I believe that everyone has a deeper understanding of "div css only shows half of each line of text", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report