php - 当某些标题比其他标题长并且需要换行时，使所有标题元素具有相同的高度

Question

我在基于卡片的布局中显示信息，但如果卡片中的任何标题超过 41 个字符，则它不适合卡片。

我考虑过使用 [wordwrap]，但这样做只会导致一个特定的标题换行并更改该卡片的高度，从而影响其他卡片的布局。

这是我用来打印分页结果的 PHP，所以它一次只打印 9 个东西。

<div class="row">
<?php
while ($row = mysql_fetch_assoc($rs_result)) {
?>
<div class="col xl4 l4 m12 s12">
<div class="card z-depth-5">
    <div class="card-content">
      <p><? echo $row["title"]; ?></p>
      <p>Category: <? echo $row["category"]; ?></p>
    </div>

</div>
</div>
<?php
};
?>
</div>

如果检测到一个标题的长度超过 41 个字符，我该如何对每个标题进行换行？

编辑:这是我创建的解决方案:

$titlebreak = $row["title"];
if (strlen($titlebreak) >= 40)
    {
        $titlebreak2 = wordwrap($titlebreak, 39, "</p><p>");
    }
    else
    {
        $titlebreak2 = $row["title"] . "<p>&nbsp;</p>\n";
    }

Answer 1

我在下面列出了 3 种可能的解决方案 - 按照您在问题中的询问添加手动换行符；一个基本但不令人满意的 CSS 选项和一个 jQuery 解决方案，在这种情况下，我认为这是最灵活的解决方案。

虽然纯 CSS 解决方案通常是解决布局问题的首选方法，但当涉及到元素的等高时，并没有明确的方法来做到这一点，通常像下面这样的 jQuery 解决方案是必需的。

1. 手动换行 - 按照您问题中的要求

您可以通过两种不同的方式在 PHP 中轻松执行此操作，而不是像前面提到的那样执行额外的 SQL 查询:

(a) 在显示它们之前循环遍历行以计算标题长度，然后再次循环以显示有/没有换行符
或
(b) 如果你真的不想循环两次，你可以在循环一次时包括换行符而不考虑长度，但也可以计算该循环中的行长度。如果不需要，则使用 CSS 隐藏换行符

(a) 2个循环:计算长度，判断是否加换行:

<?php
$maxchars = 41;
$cards = array();
$bLongTitle = false;

while ($row = mysql_fetch_assoc($rs_result)) {
    // save detaisl to $cards array
    $cards[$row["title"]] = $row["category"];
    // check title lengths until we find one over 41 - no need to check any more after that
    if (!$bLongTitle && strlen($row["title"])) > $maxchars)
        $bLongTitle = true;
}
?>
<div class="row">
<?php
foreach ($cards as $title => $category) {
    ?>
    <div class="col xl4 l4 m12 s12">
        <div class="card z-depth-5">
            <div class="card-content">
              <p><? 
                 // if there were any long title, wrap them all text
                 if ($bLongTitle) 
                     $title = wordwrap($title, $maxchars, "<br />\n");
                 echo $title;
              ?></p>
              <p>Category: <? echo $category; ?></p>
            </div>
        </div>
    </div>
    <?php
}
?>
</div>

(b) 1循环:一直显示换行符，不需要时隐藏

<div class="row">
<?php
$bLongTitle = false;
while ($row = mysql_fetch_assoc($rs_result)) {

    ?>
    <div class="col xl4 l4 m12 s12">
    <div class="card z-depth-5">
        <div class="card-content">
          <p class="cardTitle"><? echo wordwrap($title, $maxchars, "<br />\n"); ?></p>
          <p>Category: <? echo $row["category"]; ?></p>
          <?php 
             // check title lengths until we find one over 41 - no need to check any more after that
            if (!$bLongTitle && strlen($row["title"])) > $maxchars)
               $bLongTitle = true;
          ?>
       </div>

    </div>
    </div>
    <?php
};
?>
</div>
<?php if ($bLongTitle) {?>
    <script>.cardTitle br {display:none;}</script>
<?php } ?>

1. 纯 CSS 解决方案 - 对 OP 不可行？

因为标题不是直接 sibling ，所以唯一的方法是固定所有标题的高度。这不是一个理想的解决方案，因为我确信标题的长度可能会有很大差异，因此不可能选择“默认”高度来适应每种可能性，甚至由于列的响应宽度可能会改变高度而变得复杂动态地。

但为了完整起见:

• 在循环中的标题中添加一个类(例如 .cardTitle)
• 确定带和不带换行符的标题的合适高度，并在您的 CSS 中设置这些高度
• 将相应的类(例如 wrapTitle)添加到您的 <p>如果循环中的任何标题太长(类似于在上面添加换行符)

CSS

p.cardTitle { height:20px; } /* example of the default height for title */
p.cardTitle.wraptitle { height:40px; } /* example of height for wrapped title */

PHP(在遍历 SQL 行以填充 $cards 数组作为上面的选项 (a) 之后)

<?php
foreach ($cards as $title => $category) {
    ?>
    <div class="col xl4 l4 m12 s12">
        <div class="card z-depth-5">
            <div class="card-content">
                <p class="cardTitle <?php if ($bLongTitle) echo "wrapTitle"; ?>"><? echo $title; ?></p>
                <p>Category: <? echo $row["category"]; ?></p>
            </div>
        </div>
    </div>
    <?php
};
?>

1. jQuery

您可以使用 jQuery 循环遍历所有元素来计算高度，并将它们全部设置为最高的。

您可以自己编写代码(请参阅 How to make all div columns of the same height automatically with jQuery 或 Setting equal heights for div's with jQuery，但有一个库可以为您完成此操作: matchHeight

使用这个库，您需要做的就是将它包含在您的页面上并像这样调用它(假设您已经将类 cardTitle 添加到包含您的标题的 <p> 中)

jQuery(document).ready(function() {
    $(".cardTitle").matchHeight();
});