css如何实现英文对话排版

Question

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

• 

Answer 1

其实，既然使用了CSS，HTML怎么写都无所谓。只要注意一点，就是要注意HTML标签自身的默认样式及一些特别之处。例如table会影响性能，ul内边距和圆点等。由于名字是不定长度的，所以使用width是不行的。同时，为了保证布局一致，所以在不定width的情况下，只能用table和grid布局了。在考虑table渲染性能的情况下，使用grid布局。<div class="messages">&nbsp; <div class="name">GEORGE</div>&nbsp; <div class="content">Two return tickets to ...</div>&nbsp; &nbsp; &nbsp;&nbsp; <div class="name">ATTENDANT</div>&nbsp; <div class="content">At nineteen minutes ...</div>&nbsp; &nbsp;&nbsp; <div class="empty-line"></div>&nbsp; &nbsp;&nbsp; <div class="name">GEORGE</div>&nbsp; <div class="content">Which platform?</div></div>.messages {&nbsp; display: grid;&nbsp; grid-template-columns: auto 1fr;}.name {&nbsp; white-space: nowrap;}.name::after {&nbsp; content: ":";}.content {&nbsp; text-align: justify;}.empty-line {&nbsp; grid-column-end: 3;&nbsp; grid-column-start: 1;&nbsp; height: 1em;}名字和说的话不在一行比较简单。因为不必考虑每行的名字长度是否统一的问题<div class="messages">&nbsp; <div class="name">GEORGE</div>&nbsp; &nbsp;&nbsp; <div class="message">&nbsp; &nbsp; <p>Two return tickets to ...</p>&nbsp; &nbsp; <p>Two return tickets to ...</p>&nbsp; </div></div>.messages {&nbsp; margin-bottom: 1em;}.name {&nbsp; content: ":";}/* 以下对于.message的样式三选一 *//* 使用margin-left缩进 */.message {&nbsp; margin-left: 2em;}/* 使用padding-left缩进 */.message {&nbsp; padding-left: 2em;}/* 使用text-indent缩进 */.message {&nbsp; text-indent: 2em;}