Как сделать так, чтобы текст промежутка не передавался на следующую строку, основываясь на содержании предыдущего элемента пролета, используя css?

Question

Я хочу, чтобы текст элемента span был зафиксирован в двух строках во flexbox.

Что я пытаюсь сделать?

Я хочу реализовать что-то вроде выше. Проблема в том, что значение в / 400 становится одинарным di git, двумя di git или любой другой длиной, где текст «Доступно некоторое значение» и «Доступно некоторое значение 2» переносится на три строки. я хочу, чтобы он всегда был в две строки ...

как показано ниже

Available   Available
some value  some value2

Как сохранить его постоянным, всегда заключенным в две строки.

ниже - мой код,

<Wrapper>
    <Container>
        <Comp size={12} weight={700}>
            Name
         </Comp>
         <Text size={12}>
             Nameeee Nameeeee Nameee
         </Text>
     </Container>
     <View>
        <Text size={25} weight={700}>
            3
        </Text>
        <Text size={14} weight={700}>
            /400
        </Text>
    </View>
    <firstText size={12}>
        Available some value
    </firstText>
    <Divider />
    <View>
        <Text size={25} weight={700}>
            2
        </Text>
        <Text size={14} weight={700}>
            /400
        </Text>
    </View>
    <secondText size={12}>
        Available some value2
    </secondText>
</Wrapper>


const Wrapper = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-left: 32px;
    padding: 12px 16px;
`;

 const Container = styled.div`
     display: flex;
     flex-direction: column;
     white-space: nowrap;
`;

 const View = styled.div`
     display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-grow: 1;
    margin-left: 16px;
    margin-top: 8px;
`;

 const firstText = styled(Text)`
     margin-left: 8px;
     width: 88px;
 `;

  const secondText = styled(Text)`
      margin-left: 8px;
  `;

   const Divider = styled.div`
       height: 37px;
       margin-left: 16px;
       border: 1px solid red;
   `;

Как я могу это исправить. Может ли кто-нибудь помочь мне с этим. Спасибо.

Answer 1

Чтобы разбить текст на определенную часть, добавьте <br /> разрыв строки и вот для чего они используются.

В случае, если вы хотите, чтобы текст не разбивался, используйте следующее CSS, но убедитесь, что вы завернули его в промежуток или что-то в этом роде.

span {
  white-space: nowrap;
}

В вашем случае, если я правильно понимаю, вы хотите это:

• Всего всегда два строк.
• Доступно должно быть в отдельной строке.
• Независимо от значения, следующая строка должна быть в одной строке.

Вот мое предложение:

<secondText size={12}>
    <div className="status">Available</div>
    <div className="value">some value2</div>
</secondText>

А для CSS части:

.value {
  white-space: nowrap;
}

Также я кое-что заметил. Если secondText является пользовательским компонентом React, убедитесь, что он начинается с заглавной буквы. Как SecondText.

Надеюсь, что объяснение лучше. Я использовал <div>, поскольку разрыв строки здесь презентационный , а не содержание.