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 CSS hides text that exceeds a fixed width and height

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

Share

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

This article mainly shows you "CSS how to hide more than the fixed width and height of the text", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS how to hide more than a fixed width and height of text" this article.

In the production of DIV+CSS pages, we often encounter text across a fixed height, which is also called content overflow. After we improve the content when we do a broken page, we find that in some places calligraphy exceeds the frame content overflow, and even calligraphy runs out of the border of the CSS setting equipment, as shown below:

First of all, we set up equipment such as:. STYLE1 {width:150px; height:80px;color: # 0000000; border:1px solid # FF0000;}, and calligraphy we do not know how many important ink just does not exceed the configuration of the red frame, the fact that the text or pictures are larger than the equipment equipment BOX (CSS box) height and width.

To solve the problem, we only need to participate in the overflow:hidden; style in this CSS class so that the text does not exceed the fixed height and width of the CSS box. Upon arrival, the CSS class: .STYLE1 {width:150px; height:80px;color: # 000000; border:1px solid # FF0000;overflow:hidden;} effect is shown below:

In this way, the text will not overflow across the fixed high and wide areas of the configuration.

Description:

Overflow is to retrieve or set how the content of an object is planned when it spans its specified height and width.

Overflow syntax:

Overflow: visible | auto | hidden | scroll

Overflow parameters:

Visible: do not cut the form and do not increase the migration transition bar. If you explicitly declare this default value, the object will be cut to the size of the window or frame that contains the object. And the clip property setting will take effect

Auto: this is the default value for body objects and textarea. Cut the mode and add a dynamic spring bar as needed

Hidden: does not display modes that exceed the size of objects

Scroll: always embody the transition bar of migration

The above is all the content of the article "how CSS hides text beyond a fixed width and height". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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