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>

使用表的非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

不更改HTML，您可以将跨度设置为display:table-cell;。 EG：

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>

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

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

如何防止文本跨度进入同级跨度？

3 个答案: