文字溢出

Question

I am rendering documents in the following function and I need to do this. I need to count how much of the text is overflowing and that overflowing part needs to cut and replaced with ... . So if title is Aaaaaaaaaa and the last three letters will be overflowing - then output should be Aaaa... My function works, so I can say whether the element is overflown or not, but I dont know, how to calculate, how many letters I need to cut.

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

you can just use following css:

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

More detailed below: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Answer 2

This is not easy to do in Javascript, because the size of the text is affected by the way the font is rendered. That can change from client to client, especially if they use font overrides for accessibility.

Instead, think about using CSS for those elements:

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