如何使用HTML/CSS实现这种文本换行效果

通过使用CSS中的word-wrap属性，可以将长单词分割并换行到下一行。当不可分割的字符串超过容器的长度时，使用该特性来避免溢出。

该属性指定了单词在容器中变得太长时应该如何断行，从而防止溢出。当内容超出容器的边界时，它指定了如何断开单词。

语法

下面是text-wrapping的语法：

word-wrap: normal | break-word | initial l inherit ;

为了更好地理解如何使用HTML/CSS实现文本环绕效果，让我们看一下以下示例

示例1

在下面的示例中，我们使用标签来创建围绕已上传的图片的文本环绕。

<!DOCTYPE html>
<html>
   <body>
      <style>
         body {
            margin: 20px;
            text-align: center;
            background-color:#D5F5E3 ;
         }
         img {
            float: left;
            margin: 5px;
         }
         p {
            text-align: justify;
            font-size: 25px;
         }
      </style>
      <div class="square"> 
         <div>
            <img src="https://www.tutorialspoint.com/images/logo.png" alt="Logo">
         </div>
         <p>
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and prefer
            to learn new skills at their own pace from the comforts of their
            drawing rooms.
            The journey commenced with a single tutorial on HTML in 2006 and
            elated by the response it generated, we worked our way to adding
            fresh tutorials to our repository which now proudly flaunts a wealth
            of tutorials and allied articles on topics ranging from programming
            languages to web designing to academics and much more.
         </p>
      </div>
   </body>
</html>

当脚本执行时，它将生成一个输出，包括一个图像以及将围绕它包裹的文本，并在网页上显示。

示例2

执行以下代码，观察文本是否使用文本包裹与不使用文本包裹时的效果。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            width: 200px;
            background-color: #E8DAEF;
            border: 2px solid black;
            padding: 10px;
            font-size: 20px;
         }
         .tutorial1 {
            width: 11em;
            background-color: #E9F7EF;
            border: 2px solid black;
            padding: 10px;
            word-wrap: break-word;
            font-size: 20px;
         }
      </style>
      <h1> Without text-wrapping</h1>
      <p class="tutorial"> Mahendra Singh Dhoni is an Indian former
      international cricketer who was captain of the Indian national
      cricket team....................................!!!!! </p>
      <h1> Using text-wrapping</h1>
      <p class="tutorial1"> Mahendra Singh Dhoni is an Indian former
      international cricketer who was captain of the Indian national
      cricket team....................................!!!!! </p>
   </body>
</html>

当你运行以上脚本时，输出窗口会出现，显示网页上的两种类型的文本：一个是没有文本换行的，另一个是有文本换行的。

示例3

考虑以下示例，我们在输入框中放置一个进行文本换行的文本。

<!DOCTYPE html>
<html>
   <body>
      <style>
         #tutorial {
            word-wrap: break-word;
            word-break: break-all;
            height: 80px;
         }
      </style>
      <input type="text" id="tutorial" value="Tutorials Point originated
      from the idea that there exists a class of readers who respond better
      to online content and prefer to learn new skills at their own pace from
      the comforts of their drawing rooms." />
   </body>
</html>

在运行上面的脚本时，输出窗口将弹出，在网页上显示带有一些文本的输入字段。