我在基于卡片的布局中显示信息，但如果卡片中的任何标题超过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> </p>\n";
}
答案 0 :(得分：0)
我在下方提供了3种可能的解决方案 - 根据您在问题中提出的问题添加手动换行符;一个基本但不令人满意的CSS选项和一个jQuery解决方案，在这种情况下是我认为最灵活的一个。
虽然仅使用CSS的解决方案通常是修复布局问题的首选方法，但是当涉及到相同的元素高度时，没有明确的方法可以做到这一点，并且通常是一个类似下面的jQuery解决方案是必须的。
不是像上面提到的那样进行额外的SQL查询，而是可以通过两种不同的方式在PHP中轻松完成：
（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 } ?>
因为标题不是直接兄弟，所以唯一的方法是修正所有标题的高度。这不是一个理想的解决方案，因为我确定标题的长度可以变化很多，所以不可能选择＆＃34;默认＆＃34;适合各种可能性的高度，甚至因列的响应宽度而变得复杂，可能会动态地改变高度。
但为了完整起见：
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
};
?>
您可以使用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();
});
答案 1 :(得分：-2)
我会首先执行一个新的SQL查询，看看是否有任何结果的标题长度超过41个字符：
select count(*) from table where length(title)>41
然后将此查询的结果设置为变量，例如$has41
然后，您可以在循环中使用if语句...
if($has41) {
// do something with $row['title']
} else {
// do something else with $row['title']
}