如何防止 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

将文本内容包装到 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 2

制作符号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>

Answer 3

在不更改 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，那么为什么不使用嵌套的 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>

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

How to prevent text from span to go under content from sibling span?

html

css

internet-explorer

css-tables

internet-explorer-9