html - 如何使用 CSS 向文本行添加制表符或空格？

Question

如何使对话对话如下所示：

第一个人：“你好”
第二个人：“你好”

我的对话用黑色和黄色着色

如您所见，引号开始的点不匹配，因此看起来确实很乱，我想让它缩进一点，并且还希望名称块具有相同的宽度（这将适用于所有对话中的名字，不管是长名字还是短名字）你看到第三行的“你”了吗？如果可能的话，我可以让它出现在报价自动开始的地方吗？

这是我的对话：

<p class="smallmargin"><span> <span class="dialogue1"><span class="person1">Harvey: </span>&nbsp; "What are your choices when someone puts a gun to your head?"</span> <span class="dialogue2"></span></span><br /> 
<span class="dialogue2"><span class="person2">Mike: </span>&nbsp; "What are you talking about? You do what they say or they shoot you." </span> <br /> 
<span class="dialogue1"><span class="person1">Harvey: </span>&nbsp; "Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things."</span></p>

这是我的 CSS 标记：

     p.smallmargin {
         margin: 0px;
padding: 0px;

line-height:160%;
         }

  .dialogue1 {
               background-color: #FFB100;
            color: black;

            font-size: 15px;
            font-family: 'Arial Black'; 
     }
     .dialogue2 {
            font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: #FFB100;
            background-color:black;
         }

         .person1 {
                 font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: #FFB100;
            background-color:black;
           text-transform: uppercase;
             }

             .person2 {
              font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: black;
            background-color: #FFB100;
           text-transform: uppercase;
             }

顺便说一句，我知道我可以添加 ，但这意味着我必须手动将其添加到每个对话中，这将是一项令人厌烦的工作。

Answer 1

正如@Mig 建议的那样，您应该重构您的类，以便您可以为对话和名称设置通用样式，而无需复制 CSS 代码。

现在对于布局，您可以使用 CSSdisplay:table-row和获得没有实际 HTML 表格的表格结构table-cell：

HTML

<span class="dialogue one">
    <span class="person">Harvey:</span>
    <span class="text">"What are your choices when someone puts a gun to your head?"</span>
</span>

CSS

.dialogue{
    display: table-row;
}
.text, .person {
    display: table-cell;
}

演示小提琴

您还可以使用内联块以及填充和负边距的组合：

.dialogue{
    display: inline-block;
    padding-left: 100px;
}


.person{
    width: 100px;
    margin-left: -100px;
    display: inline-block;
}

这是这个的演示小提琴

Answer 2

你只需要很好地使用 css 类的力量 :D
因此，对话 1 对话 2 使用每行的类对话和奇数/偶数类来改变颜色，而不是使用类对话。然后你使用类 person 而不是 person1/2。
现在你说：

.dialogue .person { display: inline-block; width: 30px; }

为了避免所说文本的换行，我认为您应该将该文本放在带有类文本和的跨度内：

.dialogue .text { display: table-cell; }

谢谢本，但我会更进一步：
http ://codepen.io/migswd/pen/xbfmw

Answer 3

生成此类设置的最佳方法是通过

, 添加 UL LI 中的所有对话并添加 css list-style-type:none, list-style-position:outside

Answer 4

我知道有些开发者可能不同意我的观点并建议div或span用 CSS 标记，但我会使用table标记，如下所示：

<table class="myChat">
    <tr class="row1">
        <td class="cell1">Username1</td>
        <td class="cell2">text of username1</td>
    </tr>
    <tr class="row2">
        <td class="cell1">Username2</td>
        <td class="cell2">text of username2</td>
    </tr>
    <tr class="row1">
        <td class="cell1">Username3</td>
        <td class="cell2">text of username3</td>
    </tr>
</table>

和CSS：

.myChat {
    /* styling the entire chat box */
}
.myChat tr td {
    /* styling font size, padding, etc */
    font-weight: bold;
    font-family: 'Arial Black';
    font-size: 15px;
    text-transform: uppercase;
}
.myChat tr.row1 td.cell1 {
    width: 150px;/* can be anything you like */
    background-color: #FFB100;
    color: black;
    /* styling the 1st cell of row1, font color, background color, etc. */
}
.myChat tr.row1 td.cell2 {
    /* styling the 2nd cell of row1, font color, background color, etc. */
    background-color: black;
    color: FFB100;
}
.myChat tr.row2 td.cell1 {
    width: 150px;/* can be anything you like */
    background-color: black;
    color: FFB100;
    /* styling the 1st cell of row2, font color, background color, etc. */
}
.myChat tr.row2 td.cell2 {
    background-color: #FFB100;
    color: black;
    /* styling the 2nd cell of row2, font color, background color, etc. */
}