在第一个之后缩进和对齐线

Question

我有以下一段文字。

我想缩进黄色文本，以便所有黄线在其左边缘对齐。

在另一个答案中，我尝试了text-indent:-3em;padding-left:3em;，但这仅影响第一行之后的后续行。

这可以使用CSS完成吗？还是我需要构造另一个表？

这里是一个例子。这只是一行标记。

<td>PC: <span style="font-size:smaller;">US 104 Key (ANSI), DE 105 Key (ISO), FR 105 Key (ISO), UK 105 Key (ISO), ES 105 Key (ISO), US 104 Key (Dvorak)</span><br/>Mac: <span style="font-size:smaller;">US 109 Key (A1048), US 109 Key (A1243), UK 110 Key (A1048)</span></td>

除了我在发布链接时删除了链接。

Answer 1

您所引用的无效解决方案可以得到改进和扩展，以实现您追求的目标：

function exerciseThree (str) {
  var length = str.length;
  return length;
}

console.log("'One' is " + exerciseThree("One") + " characters long");
console.log("'Hello, World!' is " + exerciseThree("Hello, World!") + " characters long");

.x {
  position: relative;
  left: 3em;
  width: calc(100% - 3em);
  color: green;
}

.y {
  display: inline-block;
  margin-left: -3em;
  width: 3em;
  color: red;
}

Answer 2

简单的解决方案，但跳到第一行：

span {
  display: flex;
  padding-left: 3em;
  font-size: smaller; 
}

<td>PC:
  <span>US 104 Key (ANSI), DE 105 Key (ISO), FR 105 Key (ISO), 
  UK 105 Key (ISO), ES 105 Key (ISO), US 104 Key (Dvorak)</span>
  <br/>Mac:
  <span>US 109 Key (A1048), US 109 Key (A1243), UK 110 Key (A1048)</span>
</td>

Answer 3

使其甜和简单。谢谢

.box {
  color: yellow;
  display: flex;
  margin-bottom: 10px;
}

.box .heading {
  color: #000;
  white-space: nowrap;
  margin-right: 10px;
}

<div class="box">
  <div class="heading">Heading 1:</div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="box">
  <div class="heading">Heading 1:</div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>