CSS：内容超出范围[重复]答案

【问题标题】：css: content out of span [duplicate]CSS：内容超出范围[重复]
【发布时间】：2020-04-21 22:21:50
【问题描述】：

我写了一个 html-css 演示，它有两个简单的 span 标签。我在 span 中放了一些内容，并使用相同的 css 代码。但是右侧 span 的内容超出了边框，左侧 span 的内容 在边界。

body {
  background: #f5f5f5;
}

.container{
  background-color: #5b6dcd;
  color: #fff;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  width:400px;
}

span{
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 100px;
}

<div class="container">
    <span>
    This is a box where you can change the width.
    </span>
    <span>
    o1bn-43OCWVIP2fQNVPTQ1QNQrKc
    </span>
</div>

My demo project on codeopen

我是css的初学者，有人可以解释一下发生了什么吗？ 为什么是正确的出境？谢谢大家。

【问题讨论】：

标签： html css

【解决方案1】：

添加到您的样式 css 以跨越此

span {
   word-wrap: break-word;
}

因为它是一长串文本，浏览器可以按字分割，就像第一个跨度一样

【讨论】：

【解决方案2】：

文本溢出，因为文本中没有空格可以换行。

您可以使用word-break: break-all; 解决这个问题，它会在“单词”中间中断。

【讨论】：