html - 限制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 的线条有关。需求只是允许显示 FieldBody 的 5 行，现在看起来像:

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

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

这样，你就有 <p> - 围绕所有 Z1、Z2 ... 的标签 - 然后使用 CSS 更容易控制。在这种情况下，CSS 文件中的这一行:

.foo-1  {display: none}

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

2) “wham-bam-thank-you-mam”解决方案(快速且肮脏!)

简单地向您的 <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;是让浏览器将其作为“ block ”处理。 Overflow:hidden;是告诉浏览器:“嘿 - 请不要显示‘ block ’之外的内容”。还有width和 height是否有(以像素定义)让浏览器知道“ block ”有多大。

我希望这会有所帮助。