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

This article introduces the knowledge of "how to control the text length of css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Css controls the length of the text: 1, add the "white-space:nowrap" style to the text element to set the text not to wrap; 2, add the "overflow:hidden" style to the text element to set the text that exceeds the length of the text as hidden.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The method of controlling text length by css

1. Create a new html file, named test.html, to explain how css limits the length of text. Use the div tag to create a paragraph of text and set its class attribute to tt, which is mainly used to set the css style through the class below. Write a tag, and the css style of the page will be written in the tag.

Within the css tag, the div style is set through the class name tt of the div, and the css style is written in curly braces. Use width to set the width of div to 65px, and use the float property to set the text to float to the left.

2. Within the css tag, use white-space to set the text not to wrap (nowrap), overflow to set the length that exceeds the limit, overflow attribute to specify what happens when the content overflows the element box, can be set to text hiding (hidden), and text-overflow setting does not show ellipsis if the length exceeds the limit.

Open the test.html file in the browser to see the effect of the implementation.

Summary:

1. Create a test.html file.

2. Use div to create a line of text within the file.

3, in the css style, set the width of div, text does not wrap (white-space:nowrap), more than the length of text hiding (overflow:hidden), more than the length does not show ellipsis (text-overflow:clip).

The length of the css limit is the width of the div.

This is the end of the content of "how to control the text length of css". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.