Стиль макета игровой книги в CSS

Question

Я пытаюсь создать стиль компоновки playbook, который выглядит следующим образом:

       Name: Text starting here - style #1
             text which should go in a new line with different style #2
             text continue here with another new line - style #1

Longer Name: Text starting here - style #1
             text which should go in a new line with different style #2
             text continue here with another new line - style #1

Моя проблема в том, что я не могу получить текст стиля # 2, начинающийся с новой строки.

Это мой код:

<div class="line">
  <div class="level1">
    <div class="name" >name:</div> 
      Text starting here - style #1 
      <span>text which should go in a new line with different style #2</span> 
      text continue here with another new line - style #1
    </div>
  </div>

<style type="text/css">
.line {
    text-align: right;
    font-size: 14px;
    width: 477px;
    margin: 0 auto;


}

.level1 {
    display: inline-flex;
    font-size: 14px;
    line-height: 12px;


}

.name {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    min-width: 50px;
    text-align: left;
    margin-left: 15px;


}

</style>

При этих значениях стиль № 2 всегда переносится в новый столбец, а не в новую строку.Вот пример jsfiddle .Я почти уверен, что это вызвано "flex-inline".У меня есть альтернатива для этого?

Answer 1

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

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

.main {
  margin: 1px;
  border: 1px solid;
  padding: 10px;
  display: inline-block;
}

section {
  margin-bottom: 5px;
  text-align: right;
  border: 1px solid red;
  padding: 10px;
}

section>.name {
  border: 1px solid;
  padding: 5px;
  display: inline-block;
  vertical-align: top;
}

section>.content {
  border: 1px solid;
  padding: 5px;
  max-width: 100%;
  display: inline-block;
  text-align: left;
}

<div class="main">
  <section>
    <div class="name"> name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">Much Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">A really Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
</div>

Answer 2

Этот код может вам помочь.

<div class="line">
  <div class="level1">
    <label class="name" >name:</label> 
    <p>
      Text starting here - style #1 <br>
      text which should go in a new line with different style #2 <br>s
      text continue here with another new line - style #1
    </p>
    </div>
  </div>

<style type="text/css">
.line {
    font-size: 14px;
    width: 477px;
    margin: 0 auto;


}

.level1 {
    display: inline-flex;
    font-size: 14px;
    line-height: 12px;


}

.name {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    min-width: 50px;
    text-align: left;
    margin-left: 15px;


}

</style>