html - CSS：内容超出范围

问题描述

我写了一个 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>

我在 codeopen 上的演示项目

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

标签： htmlcss

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

span {
   word-wrap: break-word;
}

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

html - CSS：内容超出范围

问题描述

解决方案

推荐阅读