css3文本换行

最新推荐文章于 2024-02-18 11:09:11 发布

liya_nan

最新推荐文章于 2024-02-18 11:09:11 发布

阅读量2.6k

点赞数 1

分类专栏： CSS 文章标签： css3 文本换行

本文链接：https://blog.csdn.net/liya_nan/article/details/83008308

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先我们看一下未对文本进行处理的效果：

下面是代码实现：

<!DOCTYPE html>
<html>
  <head>
  <style>
    .text {
      width: 300px;
      height: auto;
      border: 1px solid pink;
    }
  </style>
  </head>
  <body>
    <div class="text">
      <p class="chinese">可就是我再也没遇到一个像福贵这样令我难忘的人了，对自己的经历如此清楚，又能如此精彩地讲述自己。他就是那种能够看到自己过去模样的人，他可以准确地看到自己年轻时走路的姿态，甚至可以看到自己就是如何衰老的。</p>
      <p class="english">Stray birds of summer come to my window to sing and fly away。 And yellow leaves of autumn， which have no songs， flutter and fall there with a sigh。</p>
      <p class="english">iamveryveryveryveryveryveryveryhappynow.</p>
      <p class="number">3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647</p>
    </div>
  </body>
</html>

由上述结果可以看出，当未对文本进行换行处理时，中文字符串可以自动换行，英文字符串中带空格的可以自动换行，数字不会换行。下面我们对这些未换行的字符串进行处理：

文本换行（word-wrap）：

.text {
   width: 300px;
   height: auto;
   border: 1px solid pink;
   word-wrap: break-word;
}

效果实现：

liya_nan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3文本换行

首先我们看一下未对文本进行处理的效果：下面是代码实现：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;style&gt; .text { width: 300px; height: auto; border: 1px solid pink; } &lt;/style...
复制链接

扫一扫