如何防止文本从跨度进入兄弟跨度的内容？

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>

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

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>

既然您使用的是表格，为什么不只拥有一个嵌套表格或更多单元格和跨度？例如：

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>

Answer 2

将文本内容包装到一个 div 元素中（text-wrap 在下面的代码中），并将 td 内的所有内容包装到一个 div 元素中（wrap 元素）并使其成为 flexbox - 见下面的演示：

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

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

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

.wrap {
  display: flex;
}

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>
        <div class="wrap">
          <span class="symbol">?</span>
          <div class="text-wrap">
            <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></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

使用 tables 的非 flexbox 解决方案，使用与上述相同的标记：

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

.wrap {
  display: table;
}

.wrap>* {
  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="wrap">
          <span class="symbol">?</span>
          <div class="text-wrap">
            <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></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

制作符号float元素并使高度足够大：

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;
  float: left;
  margin-right: 5px;
  padding-bottom: 50px;
}

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