html中怎么让英文排版,css如何实现英文对话排版

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

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

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

GEORGE

Two return tickets to ...

ATTENDANT

At nineteen minutes ...

GEORGE

Which platform?

.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;

}

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

GEORGE

Two return tickets to ...

Two return tickets to ...

.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;

}