限制html中嵌入元素的输出答案

【问题标题】：Limit the Output of embedded element in html限制html中嵌入元素的输出
【发布时间】：2017-02-20 13:01:06
【问题描述】：

我在 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？

【问题讨论】：

这些 Z1、Z2、.. 是否在单独的
标签中？
不幸的是，它不是一个文本/字段，末尾有换行符
好的，我已经修改了答案。

标签： html css output limit

【解决方案1】：

看起来你正在“制作”你的代码，用某种我不熟悉的语言进行编程（基于 {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>-tags - 然后使用 CSS 更容易控制。在这种情况下，您的 CSS 文件中的这一行：

.foo-1  {display: none}

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

2) 'wham-bam-thank-you-mam'-解决方案（快速'n'dirty！）

简单地为您的<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; 是用来告诉浏览器的：'嘿 - 请不要显示'块'之外的东西'。 width 和 height 在那里（以像素定义）让浏览器知道“块”有多大。

我希望这会有所帮助。

【讨论】：

美丽 :-D 非常感谢 wham-bam-solution 不仅解决了我的问题，还给了我欢呼。实际上，html 嵌入在一个评估 html 的控件中，因此 php 是不可能的。也感谢您的解释，它将在未来帮助我！祝你有美好的一天！

【解决方案2】：

如果这些 Z1、Z2、.. 在相同的 p 标签中，则在 p 标签中添加 line-height 并将 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标签。

【讨论】：

快速而肮脏的解决方案成功了，但我感谢您写答案的努力:-)