css如何实现英文对话排版

Question

css如何实现英文对话排版如图

Answer 1

其实，既然使用了CSS，HTML怎么写都无所谓。只要注意一点，就是要注意HTML标签自身的默认样式及一些特别之处。例如table会影响性能，ul内边距和圆点等。

由于名字是不定长度的，所以使用width是不行的。同时，为了保证布局一致，所以在不定width的情况下，只能用table和grid布局了。

在考虑table渲染性能的情况下，使用grid布局。

<div class="messages">

  <div class="name">GEORGE</div>

  <div class="content">Two return tickets to ...</div>

     

  <div class="name">ATTENDANT</div>

  <div class="content">At nineteen minutes ...</div>

   

  <div class="empty-line"></div>

   

  <div class="name">GEORGE</div>

  <div class="content">Which platform?</div>

</div>

.messages {

  display: grid;

  grid-template-columns: auto 1fr;

}

.name {

  white-space: nowrap;

}

.name::after {

  content: ":";

}

.content {

  text-align: justify;

}

.empty-line {

  grid-column-end: 3;

  grid-column-start: 1;

  height: 1em;

}

名字和说的话不在一行比较简单。因为不必考虑每行的名字长度是否统一的问题

<div class="messages">

  <div class="name">GEORGE</div>

   

  <div class="message">

    <p>Two return tickets to ...</p>

    <p>Two return tickets to ...</p>

  </div>

</div>

.messages {

  margin-bottom: 1em;

}

.name {

  content: ":";

}

/* 以下对于.message的样式三选一 */

/* 使用margin-left缩进 */

.message {

  margin-left: 2em;

}

/* 使用padding-left缩进 */

.message {

  padding-left: 2em;

}

/* 使用text-indent缩进 */

.message {

  text-indent: 2em;

}