显示最大字符数和一个按钮，单击该按钮可在博客标记页面的描述中显示全文

Question

嗨，我只想当我在wordpress博客上填写标签描述时，在前端显示为我的wooccommerce标签描述，如下所示(https://www.regalizfunwear.es/etiqueta-producto/cinturones-arcade/)只显示自定义数量的字符和显示所有描述的链接。

我刚刚找到了处理产品标签的代码，但我不知道如何将其用于博客标签，比如(https://www.regalizfunwear.es/tag/moda/)：

.woocommerce .woocommerce-products-header{
text-align: left;
}
.woocommerce .woocommerce-products-header .term-description-wrap{
display: flex;
}
.woocommerce .woocommerce-products-header .term-description-wrap.has-content{
margin-bottom: 4rem;
}
.woocommerce .woocommerce-products-header .term-description-wrap > .term-thumbnail{
padding-right: 2rem;
flex-basis: 17rem;
}
.woocommerce .woocommerce-products-header .term-description-wrap > .term-thumbnail > img{
display: block;
}
.woocommerce .woocommerce-products-header .term-description-wrap .term-description{
margin-bottom: 0;
flex: 1;
}
.woocommerce .woocommerce-products-header .term-description-wrap .term-description > *:last-child{
margin-bottom: 0;
}
@media only screen and (max-width: 650px){
.woocommerce .woocommerce-products-header .term-description-wrap{
display: block;
}
.woocommerce .woocommerce-products-header .term-description-wrap > .term-thumbnail{
padding-right: 0;
margin-bottom: 2rem;
}
}
.woocommerce .woocommerce-products-header .term-description *{
text-align: left !important;
}
.woocommerce .woocommerce-products-header .term-read-more{
display: none;
}
.woocommerce .woocommerce-products-header .term-read-more:not(:checked) ~ .term-description{
height: 20rem;
overflow: hidden;
position: relative;
}
.woocommerce .woocommerce-products-header .term-read-more:not(:checked) ~ .term-description:after{
cursor: pointer;
content: "Leer más";
display: block;
font-size: .9em;
text-decoration: underline;
position: absolute;
bottom: 0;
width: 100%;
padding-top: 3rem;
background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

add_action('woocommerce_archive_description', function () {
if (!(is_product_taxonomy() && 0 === absint(get_query_var('paged')))) {
return;
}
$term = get_queried_object();
if (!$term) {
return;
}
//    add_filter('woocommerce_format_content', function ($text) {
//        $text = wpautop($text);
//        $text = str_replace(['<p>', '<p >', '</p>'], ['', '', '<br><br>'], $text);
//        return $text;
//    });
?>
<label class="term-description-wrap <?php echo $term->description ? 'has-content' : '' ?>">
<?php
}, 1);
add_action('woocommerce_archive_description', function () {
if (!(is_product_taxonomy() && 0 === absint(get_query_var('paged')))) {
return;
}
$term = get_queried_object();
if (!$term) {
return;
}
$thumbnail_id = absint(get_term_meta($term->term_id, 'thumbnail_id', true));
if (!$thumbnail_id) {
return;
}
?>
<div class="term-thumbnail">
<?php echo wp_get_attachment_image($thumbnail_id, 'thumbnail') ?>
</div>
<?php
}, 5);
add_action('woocommerce_archive_description', function () {
if (!(is_product_taxonomy() && 0 === absint(get_query_var('paged')))) {
return;
}
$term = get_queried_object();
if (!$term) {
return;
}
?>
<input class="term-read-more" type="checkbox">
<?php
}, 6);
add_action('woocommerce_archive_description', function () {
if (!(is_product_taxonomy() && 0 === absint(get_query_var('paged')))) {
return;
}
$term = get_queried_object();
if (!$term) {
return;
}
?>
</label>
<?php
}, 100);

感谢

Answer 1

我不确定我是否完全理解您的问题，您是否希望在一定数量的字符后截断字符串？我知道你可以用CSSoverflow:hidden;和max-width: $declared_amount;做到这一点。或者你也可以用线夹来做。我通常对所有摘录都使用lineclamp。

display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;  
overflow: hidden;

如果您希望lineclamp在选中时显示，您还可以在复选框单击时创建一个javascript函数，并切换一个删除lineclamp的类。在Jquery中，if看起来像这样。

$('input[type=checkbox]').click(function() {
$(this).toggleClass("expand-clamp");
});