CSS学习（十三）-文本换行符技巧

最新推荐文章于 2024-07-03 17:59:27 发布

bwshqh

最新推荐文章于 2024-07-03 17:59:27 发布

阅读量2.2k

点赞数

分类专栏： css css学习文章标签： css css3

本文链接：https://blog.csdn.net/bwshqh/article/details/50868219

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.word-wrap 用来断词而不是断字符
2.word-break:
a.break-all 可以允许非中文断开
b.keep-all 在中文里不允许字断开
2.white-space:
a.nowrap 文本强制不换行
b.pre 显示预定义文本格式
3.浏览器适应：
a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示
b.在firefox下需要采用word-wrap:break-word和overflow:hidden结合

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        pre{
            background: #aeaeae;
            white-space: pre-wrap;
            white-space: pre-line;
            white-space: -o-pre-wrap;
            white-space: -moz-pre-wrap !important;
            word-wrap: break-word;
        }
        table{
            background: #829516;
            table-layout: fixed;
            width:50px;
        }
        table td{
            background: #31b2c6;
            overflow: hidden;
            word-wrap: break-word;
        }
        #div1 p{
            background: #f5f5f5;
            width:50px;
            overflow: hidden;
            word-wrap: break-word;
        }
        #div2 p{
            background: #f98263;
            width:50px;
            white-space: nowrap;
            word-break: keep-all;
        }
    </style>
</head>
<body>
<pre>
    我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</pre>

<table>
    <tr>
        <td>
            下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
        </td>
    </tr>
</table>

<div id="div1">
       <p>
        我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
       </p>
</div>

<div id="div2">
       <p>
      下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
       </p>
</div>
</body>
</html>

bwshqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS学习（十三）-文本换行符技巧

一、理论：1.word-wrap 用来断词而不是断字符2.word-break:a.break-all 可以允许非中文断开b.keep-all 在中文里不允许字断开2.white-space:a.nowrap 文本强制不换行b.pre 显示预定义文本格式3.浏览器适应：a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示b.在
复制链接

扫一扫

专栏目录