我如何在双支架中截断物品购物

Question

我需要截断从每个产品的标题中返回的字符数量

<div class="boost-pfs-filter-product-bottom">
                <a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
                    <h4 class="cl-product-card-name">[[itemTitle]]</h4>
                </a>
                <div class="cl-product-card-price">[[itemPrice]]</div>
                
                <button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]",  {"stockMap": "{}" })'>
                    [[quickAddText]]
                </button>
            </div>

需要截断的元素是第3行上的[[itemTitle]]，但是我不确定如何处理此问题，因为双方括号引起了问题。有什么想法在这里需要做什么？如果需要更多信息，请随时提出

Answer 1

这应该有效：

<div class="boost-pfs-filter-product-bottom">
            <a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
                <h4 class="cl-product-card-name" aria-label="[[itemTitle]]" title="[[itemTitle]]">[[itemTitle | truncate: 20]]</h4>
            </a>
            <div class="cl-product-card-price">[[itemPrice]]</div>
            
            <button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]",  {"stockMap": "{}" })' aria-label="[[quickAddText]] [[itemTitle]]">
                [[quickAddText]]
            </button>
        </div>

任何带有管道|在变量内的任何内容都将应用过滤器，在这种情况下，截断过滤器。过滤器是允许转换变量值的液体语言中可用的功能。

在我的示例中，请注意

aria-label仍在包含完整标题，因为它将使非常重要的标题和链接大纲对残疾人更有帮助。 CSS截断将使这一不必要。

标题还包括完整标题，该标题为鼠标用户提供了通过徘徊在其上扩展标题的方法。

ARIA-LABEL该按钮的ARIA-LABEL 对通过TAB导航的屏幕阅读器用户有帮助。否则，所有快速添加按钮具有相同的可访问名称。