html - 如何防止 span 中的文本进入兄弟 span 中的内容？

Question

我有两个 span 元素彼此相邻。第一个 span 有符号元素，第二个有文本。文本太长并在符号下换行。有没有办法让文本不在第一个 span 下？这是一个例子:

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

span.symbol {
  color: red;
  font-weight: bold;
}

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <span class="symbol">?</span>
        <span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
        <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

有没有办法防止文本进入符号范围？

应该是这样的:

?  Here we have some text that can be too long sometimes. In that case text will 
   wrap under question mark symbol from the span element above.    
   - Test User Name 02/07/2019

Answer 1

在不更改 HTML 的情况下，您可以将跨度设置为 display:table-cell;。例如:

span.symbol, span.text {
  display:table-cell;
}

这样他们就会像这样坐在一起:

table.tbl {
	font-size: 12px;
  width: 500px;
}
table.tbl thead th {
	text-align: left;
}
table.tbl tbody td {
	text-align: left;
}
span.symbol {
	color: red;
	font-weight: bold;
}
span.symbol, span.text {
  display:table-cell;
}

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
			<td>Form validation text description and some instructions.</td>
		</tr>
    <tr>
      <td>
        <span class="symbol">?</span>
				<span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
				<br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

但是，实际上您应该将这两个内容 block 包装在您可以更轻松控制的元素中。

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

.symbol {
  color: red;
  font-weight: bold;
}

.symbol,
.text {
  display: table-cell;
}

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <div class="symbol">?</div>
        <div class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.
          <br><span style="color:red">- Test User Name 02/07/2019</span></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="symbol">?</div>
        <div class="text">Here we have some text that is short.
          <br><span style="color:red">- Test User Name 02/07/2019</span></div>
      </td>
    </tr>
  </tbody>
</table>

既然您无论如何都在使用表格，为什么不使用嵌套表格或更多单元格和 colspans？例如:

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

td.symbol {
  color: red;
  font-weight: bold;
  vertical-align:top;
}

<table class="tbl">
  <thead>
    <tr>
      <th colspan="2">Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td class="symbol">?</td>
        <td class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.
          <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
    <tr>
      <td class="symbol">?</td>
        <td class="text">Here we have some that is short.
          <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>