Use CSS to wrap text around a picture effect

This article mainly for you in detail the CSS text around the picture encountered problems and solutions, interested in the small friends can refer to

CSS for wrapping text around a picture effect

text around the picture , in Word just click on the right button, adjust the properties can be. However, there is no direct attribute in the HTML document. So we can use CSS to achieve this effect.

We first set the float parameter, if the picture needs left to alignment to be ieft, if the right alignment is: Yes. In addition, we can also set the space between the picture and the text interval as needed, and the same applies to CSS padding.

Cases:

The code is as follows:

 insert this picture identifier statement in the middle of the page text, OK!

(a) text around the picture instance

：


(b) CSS text around the picture encountered problems and solutions:

First, preface

Need to implement a text around the image of the effect, thought so easy.

1) Code section





Copy Code

The code is as follows:

<style>. img-left {border:3px solid #005588; width:300px;}. img-left img {float:left;/* Float the picture to achieve the */width: 150px; } </style> <p>  This is a paragraph of Chinese this is a Chinese this is a paragraph Chinese this is a paragraph Chinese this is a Chinese this is a paragraph Chinese this is a paragraph Chinese this is a paragraph Chinese this is a Chinese this is a paragraph Chinese this is a Chinese this is a paragraph Chinese this is a section of Chinese this is a paragraph Chinese this is a Chinese <p></p> </p>

2)


It's easy to get out of the desired effect. The most critical code: The picture is left floating on it, it is not quite simple.

Second, the problems encountered

When you replace the middle text with a sequential English letter, there is a problem.


Then find the relevant information, test results found that:

When the browser parses English or numbers by default, it is parsed according to the words.

That is, each word is a whole, and when you encounter a lack of space, the word is not split.

That's why the above is happening.

Last comparison chart


Third, the solution

Think: There are no related properties in CSS, can you force the text to be wrapped?

The answer is of course: word-break:break-all;

This will solve the problem.




Iv. PostScript: Word-wrap, Word-break

When looking for material, we find another attribute: Word-wrap:break-word; Why is there a repetition of attributes?

In fact, it is a way to find information, found that the two are still different:

1) Word-wrap:break-word;

--allow long words to wrap to the next line.

When a word is longer than the width of p, the default is no line wrapping:


If set Word-wrap:break-word; This word will be displayed as a newline.


2) Word-break:break-all;

--whether word is broken word processing.

The personal understanding is that it splits each letter of a word into separate units,

This makes it possible to fill it everywhere so that the text wraps around the image.