Span ocupies whole div after line break

Asked Apr 28 '21 at 17:35

Active Apr 28 '21 at 20:00

Viewed 405 times

Good evening! I am trying to center a two lines span. If the width of the screen is big enough for the span to keep everything on the same line it is fine, it is centered and the span background wraps the text. If i go for a small width though, it will break in two lines and have the span background full width. I want to keep the blue background wraping the text span. What is this behaviour? Also if i do not put text-align: center; the span on two lines will not even be centered, so the flex is not considered.

html:

body{
  margin:0;
  padding:0;
}

.text-container{
  background-color: red;
  display:flex;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
}

.text {
  background-color: blue;
  text-align:center;
 
}

<div class="text-container">
   <span class="text">OPORTUNITATI PROFESIONALE</span>
</div>

asked Apr 28 '21 at 17:35

Stefan Denis

Not sure what you are trying to say. – Spectric Apr 28 '21 at 18:04
What result do you want to get? – s.kuznetsov Apr 28 '21 at 18:56
When the width of the device is so small that the text in the span break in 2 lines, the span width and height will be 100% of the parent, and i don't want that, I want to wrap the text – Stefan Denis Apr 28 '21 at 19:10
If you add `white-space: nowrap;` to `.text`, will you get what you want? – s.kuznetsov Apr 28 '21 at 19:21
Unfortunately, no. It just stops the text from breaking into 2 lines – Stefan Denis Apr 28 '21 at 19:48

Span ocupies whole div after line break

0 Answers0

Linked