css怎么让文字不换行


本文摘自PHP中文网,作者青灯夜游,侵删。

css中可以通过white-space属性来让文字不换行显示,只需要给包含文字的元素添加“white-space: nowrap;”样式即可。white-space属性用于指定元素内的空白怎样处理;当值设置为nowrap时,则文字不会换行。

本教程操作环境:Windows7系统、css1版本、Dell G3电脑。

教程推荐:css视频教程

在CSS中,可以通过white-space属性来实现文字不换行显示;只要将white-space属性的值为nowrap就可强制文字不换行。

css white-space属性

white-space属性指定元素内的空白怎样处理。

2.png

属性值:

  • normal:默认值。空白会被浏览器忽略。

  • pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

  • nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

  • pre-wrap:保留空白符序列,但是正常地进行换行。

  • pre-line:合并空白符序列,但是保留换行符。

示例:white-space:nowrap和normal一样,也合并空格,但是不会根据容器大小换行,表示不换行。

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

27

28

<!DOCTYPE html>

<html>

  

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

            p {

                width: 400px;

                height: 50px;

                border: 1px solid pink;

                 

            }

            .nowrap{

                white-space: nowrap;

            }

        </style>

    </head>

  

    <body>

        <p>普通文本!!!

            这是一些文本。 这是一些文本。 这是一些文本。

        </p>

        <p class="nowrap">强制文字不换行!!!

            这是一些文本。 这是一些文本。 这是一些文本。

        </p>

    </body>

  

</html>

效果图:

阅读剩余部分

相关阅读 >>

css @font-face属性怎么用

css如何实现始终将footer固定在底部

利用css如何实现图片轮播效果?(代码示例)

css border不显示怎么办

html中如何设置不可点击

css怎么把字体加粗加大

css如何修改光标颜色

css怎么实现隐藏并占位

css flex-flow属性怎么用

react如何引入css

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




打赏

取消

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

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

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

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

评论

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