如何跨越这个文本？

Question

我在表格行中的表格单元格中有一些文本，我试图让文本跨度。 文字一直停在原地。

这是我目前拥有的：

但这正是我想要的：

我希望文本跨越所有方式。 我将如何实现它？

这是我的代码：

.normal-cell-styling-left-second {
  width: 350px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-right-second {
  width: 700px;
  padding-top: 20px;
  padding-left: 200px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td className="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td className="normal-cell-styling-middle-second">
      0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24)
    </td>
    <td className="normal-cell-styling-right-second">
      <div className="image-placeholder5"></div>
    </td>
  </tr>
  <table>

Answer 1

不确定，但您似乎对表格样式有些不熟悉：

• vertical-align 可用于单元格上，以判断内容是否居中、顶部对齐或底部对齐，而无需使用填充或行高进行平均对齐。 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align（往下看表格单元格）

• border-collapse 或border-spacing 可用于避免单元格边框之间的间隙。请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse 和 https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing 可能看起来相似，但在表格上绘制边框时涉及不同的行为。

• table-layout:fixed 可用于为表格和单元格设置固定宽度，以便它们不再收缩/扩展。 （高度不能设置为固定值，表格不会显示滚动条）这是关于表格（或display:table/table-cell/...属性）渲染行为需要了解的一件事.

• white-space 可以在任何地方使用，您可能会更了解它https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

这里有一个sn-p，可能更接近你的期望，毫不犹豫地澄清你的需求和对我自己的误解。

table{
border-spacing:0;/* or border-collapse:collapse; */
}
.normal-cell-styling-left-second {
  width: 350px;
  border-bottom: 1px solid ;
  vertical-align:top;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;/* needed ?*/
  border-bottom: 1px solid ;
  white-space:nowrap;
}

.normal-cell-styling-right-second {
  border-bottom: 1px solid ;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td class="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td class="normal-cell-styling-middle-second">
      0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
    </td>
    <td class="normal-cell-styling-right-second">
      <div class="image-placeholder5"></div>
    </td>
  </tr>
  <table>

Answer 2

修改css

.table thead tr th td { 
    white-space:nowrap
}

然后在表格数据样式中使用white-space-no-wrap

<td style="white-space:nowrap;" className="normal-cell-styling-middle-second"> 0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24) </td>

Answer 3

只要把它放在像你的 SHADOW_SPREAD 这样的跨度中

.normal-cell-styling-left-second {
  width: 350px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-right-second {
  width: 700px;
  padding-top: 20px;
  padding-left: 200px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td className="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td className="normal-cell-styling-middle-second">
    <span class="gray-dynamic">
      0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
      </span>
    </td>
    <td className="normal-cell-styling-right-second">
      <div className="image-placeholder5"></div>
    </td>
  </tr>
  <table>