所以基本上，我的页面是一个商店，所以内容是用php短代码生成的，如下所示：
<?php get_header(); ?>
<div id="main-content">
<div id="page-content">
<?php
echo do_shortcode('[products limit="20" columns="4" category="t-shirt"]');
?>
</div>
</div>
<?php get_footer(); ?>
<script>$(document).ready(linebreak)</script>
所以它给了我一个像这样的基本页面，其中我的内容是元素列表：
<html>
<head></head>
<body>
<div id="main-content">
<div id="page-content">
<ul class="my-list">
<li class="my-element">
<img>
<h2>A title</h2>
</li>
<li class="my-element">
<img>
<h2>A title</h2>
</li>
</ul>
</div>
</div>
<footer></footer>
</body>
</html>
<script>$(document).ready(linebreak)</script>
确实有20多里，但你可以看到我的页面是什么样子的。我使用换行jquery函数来检查我的h2标题是否有换行，因为我不想要它。如果有换行，它只是保留20个第一个字符，并在结尾添加"…"。它运行得很好，除了有一个或到h2并不总是根据我的重新加载而更改。它们确实有换行符，但当我多次重新加载页面时，有时函数会更改它们，有时则不会。它只是一个或两个特定的h2，并且总是相同的。为什么每次运行页面时，我的函数都不会给出相同的结果？
如果有帮助的话，下面是我的script.js中的函数，它包含在标题中：
function linebreak(){
$("#main-content #page-content .woocommerce ul li h2").each(function(index){
var lheight = Math.round(parseFloat($("#main-content #page-content ul li h2").css("line-height")));
var title = $(this).text().trim().substring(0, 100).split("").slice(0, 21).join("") + "...";
if ($(this).height() > lheight){
$(this).html(title);
}
});
};
您有想要的图像吗？使用CSS来管理太长的标题不是更容易吗？
如果标题太长，下面的代码将自动放置省略号，前提是您为h2元素设置了宽度。
例如
h2 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
您的脚本应该在文档的头部，因此您需要找到<?php get_header(); ?>的生成位置。通常是header.php
您必须等待dom完全加载
$( document ).ready(function() {
linebreak();
});
您也可以检查header.php或footer.php来删除代码。如果您的主题结构是简单的