文字溢出

Question

我正在使用以下功能渲染文档，而我需要这样做。 我需要计算多少文本溢出，该溢出部分需要剪切并替换为...。 因此，如果标题是Aaaaaaaaaa，而最后三个字母将溢出-那么输出应为Aaaa ... 我的函数起作用了，所以我可以说元素是否溢出，但是我不知道如何计算，需要剪切多少个字母。

export const fillDocuments = (data) => {

    for(var i = 0; i < data.length; i++){

        const state = data[i].documentState.id;
        const documentsForUsers = data[i].documentsForUsers;
        const approval = documentsForUsers[0].approval;

        var img = "";

        if(state === 2) 
        { // approval
            img="img/decision.svg";
        } else if(state === 1){
            // approved
            img = "img/agree.svg";
        } else if(state === 1 && approval === 2){
            img = "img/unread.svg";
        } 
        else {
            // disapproved
            img ="img/disagree.svg";
        }
        var email = $("#user_email").text();
        var object = data[i].documentsForUsers.find(el => el.user.email==email);
        var sharingType = object.sharingType.id;

        var time = sharingType === 1 ? data[i].uploadDatetime : data[i].activeStartTime;

      const markup = `<li class="side-nav__item msg-item" id="msg_item" data-id="${data[i].id}">
      <a href="#" class="side-nav__link" id="msg_link">
          <img src="${img}" class="side-nav__icon" id="msg_icon">
          </img>
          <div class="msg-data" id="msg_data">
          <span class="msg-title" id="msg_title">${data[i].title}</span>
          <span class="msg-date" id="msg_date">${formatTimeForMessages(time)}</span>
          </div>
      </a>
  </li>`;

      elements.side_msgs.insertAdjacentHTML("beforeend", markup);

      var element = document.body.querySelector(`.msg-item[data-id="${data[i].id}"]`);

      if(isOverflown(element)){
        // IF IS OVERFLOWN, THEN ADD CUT THE OVERFLOWING PART AND ADD ... instead
      }
    }
};

function isOverflown(element) {
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

Answer 1

您可以只使用以下CSS：

{
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

更详细的信息如下： https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Answer 2

这在Javascript中不容易实现，因为文本的大小受字体呈现方式的影响。客户端之间的情况可能会发生变化，特别是如果他们使用字体替代功能来实现可访问性。

相反，请考虑对这些元素使用CSS：

// for titles that should be truncated with ellipsis
.ellipsify {
    text-overflow: ellipsis;
    white-space: nowrap;
}