0

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.

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>

enter image description here

My demo project on codeopen

I'm a beginner for css,can someone please explain what happends? Why the right one out of border?Thank you for all.

Terry
  • 63,248
  • 15
  • 96
  • 118
Q10Viking
  • 982
  • 8
  • 9

2 Answers2

2

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

Anton Skybun
  • 1,479
  • 8
  • 21
1

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".

ButchMonkey
  • 1,873
  • 18
  • 30