HTML 当不适合时，将整个span标签换行显示

在本文中，我们将介绍如何在HTML中处理当内容不适合时，将整个标签换行显示的问题。有时候，当我们使用标签来表示一段文本或者一段代码时，如果宽度不够，文字就会被截断显示，这样会导致内容无法完整展示。为了解决这个问题，我们需要通过CSS来调整样式，使得不适合的标签能够自动换行显示，保证内容的完整性。

阅读更多：HTML 教程

使用CSS的word-wrap属性

要实现当标签内的内容不适合宽度时自动换行显示，我们可以使用CSS的word-wrap属性。该属性用于控制文本的换行方式，并提供了几个选项供我们选择。

其中，word-wrap属性的常用值有：
– normal：默认的换行方式，只在单词之间换行，不会截断单词；
– break-word：当内容超出宽度时，允许截断单词进行换行。

下面是一个示例代码：

<style>
    .code {
        word-wrap: break-word;
        width: 200px;
        border: 1px solid black;
        padding: 10px;
    }
</style>

<div class="code">
    <span>This is a long span that needs to be wrapped if it doesn't fit the width.</span>
</div>

在上述示例中，我们通过给包裹标签的

div>添加一个类名code，然后通过CSS来设置word-wrap属性为break-word。再通过设定width属性来限制宽度。这样当标签的内容超出了父元素的宽度时，标签内的内容就会被自动截断并换行显示。

使用CSS的overflow-wrap属性

除了word-wrap属性之外，我们还可以使用CSS的overflow-wrap属性来实现相同的效果。在大多数情况下，这两个属性是等价的，都能够实现内容不适合时的自动换行显示。

<style>
    .code {
        overflow-wrap: break-word;
        width: 200px;
        border: 1px solid black;
        padding: 10px;
    }
</style>

<div class="code">
    <span>This is a long span that needs to be wrapped if it doesn't fit the width.</span>
</div>

在上述示例中，我们同样通过给包裹标签的

div>添加一个类名code，然后通过CSS来设置overflow-wrap属性为break-word，并通过设定width属性来限制宽度。这样当标签的内容超出了父元素的宽度时，标签内的内容就会被自动截断并换行显示。

需要注意的是，虽然两者在大多数情况下是等价的，但是word-wrap属性在旧版本的浏览器中可能不被支持，此时可以使用overflow-wrap属性来代替。