Как мне предотвратить перенос страницы HTML между отдельными словами, не препятствуя переносу строки?

Question

Я пытаюсь получить на странице что-то вроде этого, когда для этого есть место:

Имя: Питер Петерсен

И затем, если имя слишком длинное для страницы, оно НЕ должно разрываться между словами, а перемещать всю строку вниз, а-ля:

Имя:

Питер Петерсен

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

.title {
   float:left;
   width: 40%;
}
.value {
   width: 60%
}

Если я запустил его как это показывает:

Имя: Питер

Петерсен

Это не то, что я хочу. Я попытался добавить white-space: nowrap к значению, но тогда текст никогда не переносился до строки ниже, а просто продолжался от края экрана. word-break: keep-all; тоже не то, что я ищу, так как это просто объединяет слова.

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

Answer 1

Слова, которые вы не хотите разбивать, должны быть в отдельном элементе с white-space: nowrap

* {
  box-sizing: border-box;
}

span:nth-of-type(1) {
  float: left;
  margin-right: 1em;
  font-weight: bold;
}

span:nth-of-type(2) {
  white-space: nowrap;
}

.wrapper {
  width: 500px;
  border: 1px solid red;
  margin-bottom:1em;  
}

.wrapper.narrow {
  width: 100px;
}

<div class="wrapper">
  <span>Name:</span>
  <span>Peter Peterson</span>
</div>

<div class="wrapper narrow">
  <span>Name:</span>
  <span>Peter Peterson</span>
</div>

Answer 2

Flex box сделает свое дело;)

HTML:

<div class="a">
  <span>name:</span>
  <span class="name">Peter Peterson</span>
</div>

CSS:

.a {
  display: flex;
  flex-wrap: wrap;
}
.name {
  white-space: nowrap;
}

https://jsfiddle.net/y06d8vu4/

Answer 3

html код:

 <div class = "wrap">
        <span>Name: </span>
        <span>Peter Peterson</span>
 </div>

css код:

.wrap {
     display: flex;
     flex-wrap: wrap;
}
.wrap span:first-child {
     margin-right: 5px;
}