How css hides the excess of elements
This article mainly introduces how css hides the extra elements, which has a certain reference value. Interested friends can refer to it. I hope you can learn a lot after reading this article.
In css, you can use the overflow attribute to hide the extra parts of the element by adding a "overflow:hidden" style to the element; when the attribute value is set to hidden, the content of the element outside the element box will be cropped and not displayed.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can set the overflow attribute of the element to hidden to hide the excess part. Here is an example of how css sets the excess part to hide.
1. Create a new html file, named test.html, to explain how css sets the extra part to hide. Use the div tag to create a line of text for testing. Set the class attribute of the div tag to txtdiv, which is used below to define its style through that class.
Set the style of div through class, define its width as 100px, height as 25px, and background color as gray.
2, in the css tag, and then use "overflow:hidden" to set when the text in the div exceeds the width, hide does not show.
Open the test.html file in a browser and view the results.
Summary:
1. Use the div tag to create a line of text, and set the class attribute of the div tag to txtdiv.
2, within the css tag, set the style of div through class, define its width and height, and then use "overflow:hidden" to set when the text in div exceeds the width, hide does not show.
Note:
If you want to show the excess with an ellipsis, you also need to add text-overflow:ellipsis and white-space: nowrap settings.
Thank you for reading this article carefully. I hope the article "how to hide the extra elements of css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
