How to realize the text wrapping effect with css
This article mainly explains "how css realizes the text surround effect". the explanation content in this article is simple and clear, easy to learn and understand. please follow the idea of Xiaobian to study and learn "how css realizes the text surround effect" together.
Methods: 1. Use the float attribute to set the element float so that the text surrounds the element, with the syntax of "surrounded element {float: floating style;}";2. Use the "word-break" attribute to set the newline style when the text surrounds, with the syntax of "text element {word-break: newline style;}."
Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.
How does CSS do text surround effect?
In CSS, you can use the float attribute to define which direction the element floats. Historically, this property has always been applied to images to wrap text around the image, but in CSS, any element can float. Floating elements generate a block-level box regardless of what element it is.
For example, we use images to add floating styles to images, and text to surround images.
123 .img-left { border: 3px solid #005588; width:300px; word-break: break-all; } .img-left img { float:left; width:150px; }
The loat attribute defines in which direction the element floats. Historically, this property has always been applied to images to wrap text around the image, but in CSS, any element can float. Floating elements generate a block-level box regardless of what element it is.
Output:
This is Chinese, if it is English, just add word-break: break-all to the element; the style allows newlines within words.
Thank you for your reading, the above is "how to achieve the text surround effect css" content, after the study of this article, I believe we have a deeper understanding of how to achieve the text surround effect css, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
