使用 multi-clamp.js 从 reddit API 截断标题

Question

我正在尝试使用（https://www.npmjs.com/package/multi-clamp)[multi-clamp.js] 到 clamp/truncate 我从 reddit api 返回的标题。

但是，它只适用于第一个重新调整的标题，而不是所有标题。我如何确保从 api 而不仅仅是第一个返回的所有标题上的函数运行s？

const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

async function getData() {
    try {
        let response = await fetch(reddit);
        let data = await response.json()
        return data;
    } catch (error) {
        console.log("error", error);
    }
}

getData()
    .then(data => data.data.children)
    .then(data => data.map(post => ({
        source: post.data.domain,
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        title: post.data.title,
    })))
    .then(data => data.map(render))

const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(document.querySelector('.news-item-title'), {
        ellipsis: '...',
        clamp: 2
    });
}

new MultiClamp.. 是标题选择器上的限制运行的位置，但它只限制第一个返回的标题，而不是所有标题。

如何在所有标题上达到运行？

Answer 1

document.querySelector returns 仅匹配 selector 的第一个元素。由于您是在整个 document 上执行它，它将始终获得您附加到文档的第一个标题，并在其上创建许多 new MultiClamp。

相反，您需要 select 新节点中的一个新标题元素：

function render(post) {
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(node.querySelector('.news-item-title'), {
//                 ^^^^
        ellipsis: '...',
        clamp: 2
    });
}

顺便说一句，使用带有未转义插值值的 innerHTML 会打开您的应用程序以进行 XSS 攻击。最好也使用 DOM API 构建整个节点内容。

使用 multi-clamp.js 从 reddit API 截断标题

Truncating titles from reddit API using multi-clamp.js

javascript

document

truncate

selectors-api