Why does display: flex break the phrase into lines?-CodePudding

I have such a text:

<div className="rate" > 
  <mark className="rate-mark"> Currency Rate : </mark>
  <mark className="code-mark">1 {code} = </mark>
  <mark className="val-mark" style={{color}}>{rate}</mark>
  <mark className="base-mark"> {base} </mark>

css

.rate-mark{
  font-size: 28px;
  font-weight: 500;
  position: relative;
  left: 30%;
  top: 70%;
  text-align: center;
  background-color: #fff; 
  width: 250px;
  height: 50px;
}

.val-mark{
  background: none;
  font-family: Economica, serif;
  position:relative;
  top: 10%;
  left: -12%;
  font-size: 25px;

}

.code-mark{
  background: none;
  font-family: Economica, serif;
  position:relative;
  padding-top: 20px;
  margin: 0px 0px 0px 50px;
  font-size: 25px;
  width: 100px;
  top: 80%;

}

.base-mark{
  background: none;
  font-family: Economica, serif;
  position:relative;
  padding-top: 20px;
  margin: 0px 0px 0px 500px;
  font-size: 25px;
  width: 100px;
  top: 80%;

}

I wanted to make such a text:

1 'code' = 0.12 'base'

But I couldn't shift base and code relative to value.I.e. top,left... didn't work.I saw in a similar situation that it is necessary to set for the parent div .rate{ display: flex; }

But after I did it the phrase Currency Rate : divided into new lines:

I tried to change everything so that it was on the same line, but nothing works.I've worked with css very little, so I'll be glad for help to fix it.

CodePudding user response：

flex are adjustable objects if there isn't enough space for the full sentence it will go to the next line.

You could solve this by wrapping the whole thing around a div like

<div>Currency Rate: </div>

If that doesn't work you could try increasing margin and padding in css

CodePudding user response：

It is not clear at all what your overall objective is, but if all you want is the phrase on one line then, given that there is sufficient width on your device/view to do so, then the following is all you need:

.ratePhrase {
    font-family: Economica, serif;
}

span.rate{
    font-size: 28px;
    background: #fff; 
}

span.val {
    background: none;
    font-size: 25px;
}

span.code {
    background: none;
    font-size: 25px;
}

span.base {
    background: none;
    font-size: 25px;
}

<div  > 
    <span > Currency Rate : </span>
    <span >1 {code} = </span>
    <span  style={{color}}>{rate}</span>
    <span > {base} </span>
</div>

If you do not want the phrase to wrap, even if your device/view is not wide enough, then add 'white-space: nowrap;' to the .ratePhrase CSS class.