在html

Question

我对HTML不太熟悉并且需要一些支持。

我有以下代码：

<table style="width:100%;">
<tr height="135px" valign="top">
<td>
    <span>{Field1}</span>
    <span>{Field2}</span>
    <span>{Field3}</span>
</td>
<td width="100%" style="border: 1px solid #f2f2f2;">
        {FieldSubject}
        <p style="white-space:pre;">{FieldBody}</p>
    </td>
</tr>
</table>

关于FieldBody的所有内容。需求只是允许显示5行FieldBody，现在它看起来像：

它低于边界。有没有办法通过html / css等限制输出Z1到Z5。

Answer 1

看起来你正在制作＆＃39;你的代码，用某种语言编程，我不熟悉（基于{FieldBody}。如果是我，那么 - 那么我会控制它，使用那种编程语言而不是CSS / HTML你可以在CSS / HTML中做到这一点 - 但它可能因浏览器而异，看起来有多好。以下是对解决方案的两点建议：

1）我会做的，如果是PHP（或其他）

<table style="width:100%;">
 <tr height="135px" valign="top">
  <td>
   <span>{Field1}</span>
   <span>{Field2}</span>
   <span>{Field3}</span>
  </td>
 <td width="100%" style="border: 1px solid #f2f2f2;">
  {FieldSubject}

  <?php $z_array = ['Z1', 'Z2', 'Z3', 'Z4', 'Z5' ...]
  $counter = 0;
  foreach ($z_array as $value) {
  ?>

  <p class="foo-<?php echo $counter ?>">$value</p>

  <?php
  }
  ?>

  <p style="white-space:pre;">{FieldBody}</p>
 </td>
</tr>
</table>

上面写的代码会输出它，所以不是这样：

<p style="white-space:pre;">Z1<br />Z2<br />Z3<br />Z4<br />...</p>

然后你会看到这些内容：

<p class="foo-1">Z1</p>
<p class="foo-2">Z2</p>
<p class="foo-3">Z3</p>
<p class="foo-4">Z4</p>
<p class="foo-5">Z5</p>

这样，您就可以在所有Z1，Z2周围找到<p> - 标签......然后使用CSS更容易控制。在这种情况下，然后在CSS文件中的这一行：

.foo-1  {display: none}

会从您的HTML文件中隐藏Z1。并且.foo-5 {display:none}会隐藏Z5。上面编写的代码尚未经过测试 - 并且是作为概念证明。

2）＆＃39; wham-bam-thank-you-mam＆＃39; -solution（快速＆＃39; n＆＃39;脏！）

只需向<p>添加一些样式即可。

所以不要这样：

<p style="white-space:pre;">{FieldBody}</p>

然后写下：

<p style="display: block; overflow: hidden; width: 100px; height: 20px; white-space:pre;">{FieldBody}</p>

然后调整高度，这样您只能看到想要看到的Z。 Display:block;可以让浏览器将其作为“块”进行处理。 Overflow:hidden;可以告诉浏览器：＆＃39;嘿 - 不要显示超出＆＃39;块的内容，请＆＃39;。 width和height就在那里（以像素为单位）让浏览器知道，＆＃39; chunk＆＃39;是。

我希望这会有所帮助。

Answer 2

如果那些Z1，Z2，..在相同的p标签中，则在p标签上添加行高，并将max-height设置为line-height *要显示的行数（例如，calc（1.2rem *） 6）或7.2rem）

td p {
  overflow: hidden;
  line-height: 1.2rem;
  max-height: calc(1.2rem * 6); 
}

如果那些Z1，Z2，..在单独的p标签中，请将以下代码添加到样式表中。

td p:nth-child(n + 6) { display: none; }

除了前5个，它将隐藏所有p标签。