英文:
css: content out of span
问题
我写了一个包含两个简单的 span 标签的 HTML-CSS 演示。我在 span 中放了一些内容，并使用相同的 CSS 代码。但是右边的 span 的内容超出了边界，而左边的 span 的内容在边界内。
<div class="container">
<span>
这是一个框，您可以更改其宽度。
</span>
<span>
o1bn-43OCWVIP2fQNVPTQ1QNQrKc
</span>
</div>
CSS 代码如下：
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;
}
我是一个 CSS 初学者，有人能解释发生了什么吗？为什么右边的超出了边界？谢谢大家。
英文:
I write a html-css demo that has two simple span tag. I put some content in the span,and use the same css code.But the content of the right span out of the border,the content of the left span in the border.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<div class="container">
<span>
This is a box where you can change the width.
</span>
<span>
o1bn-43OCWVIP2fQNVPTQ1QNQrKc
</span>
</div>
<!-- end snippet -->
I'm a beginner for css,can someone please explain what happends? Why the right one out of border?Thank you for all.
答案1
得分: 2
添加以下代码到你的样式CSS中以实现这个效果：
span {
word-wrap: break-word;
}
因为这是一长串文本，浏览器可以按单词分割它，就像第一个span中一样。
英文:
Add to your style css to span this
span {
word-wrap: break-word;
}
Because it is a long line of text and browser can split it by word, as in the first span
答案2
得分: 1
文本溢出是因为文本中没有空格来换行。
可以通过使用word-break: break-all;来解决这个问题，这将在一个“单词”的中间进行换行。
英文:
The text is overflowing because there are no spaces in the text to break onto a new line.
You can solve this by using word-break: break-all; which will break in the middle of a "word".
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论