css文字不环绕怎么办


本文摘自PHP中文网,作者藏色散人,侵删。

css文字不环绕的解决办法:首先创建一个HTML示例文件;然后在body中创建一张图片以及文字内容;最后使用CSS属性“word-break:break-all;”在恰当的断字点进行换行即可。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

css实现文字环绕图片,--遇到问题及取消文字环绕效果

我之前在写一个外国博客的时候遇到了一个问题,关于文字环绕显示问题:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

1.图片浮动,中文文字会发生环绕效果

<!DOCTYPE html>

<html>

<head>

    <title>css文字环绕</title>

    <style>

        .img-left{

            border:3px solid #005588;

            width:300px;

        }

        .img-left img{

            float:left;

            width:150px;

        }

    </style>

</head>

<body>

    <div class='img-left'>

        <img src='1.jpg'>

            这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文

    </div>

</body>

</html>

得出的页面效果是:

这里写图片描述

然后把中文换成英文:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

    <title>数组去重</title>

    <style>

        .img-left{

            border:3px solid #005588;

            width:300px;

        }

        .img-left img{

            float:left;

            width:150px;

        }

    </style>

</head>

<body>

    <div class='img-left'>

        <img src='1.jpg'>

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>

</body>

</html>

以下是页面效果:

这里写图片描述

那么应该如何解决这种问题:

我们可以使用CSS属性:word-break:break-all;在恰当的断字点进行换行
例如:

阅读剩余部分

相关阅读 >>

css边框样式如何定义

css如何隐藏x轴坐标

css怎么设置margin

教你一招搞定css背景图的大小

nav-up属性如何使用

css中有哪些常见的布局方式

css可以在html里面写吗

css grid-columns属性怎么用

你可能不了解的16 个提升布局效率的 css 伪类!!

css怎么设置文本颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...