javascript - chop 文本并根据需要恢复它

Question

My Codepen

if("matchMedia" in window) {
    if(window.matchMedia("(max-width: 533px)").matches) {
      $('.title').each(function() {
        var theContent = $(this).text();
        if (theContent.length >= 35) {
          var n = theContent.substring(0, 35);
          $(this).html(n + '...');
        }
      });
    } else {
      // ??
    }
 }

你好，

我必须创建一个函数，必须确保在传递移动分辨率时 chop 太大的文本。第一部分( chop )有效，但当分辨率超过 533px 时，我无法完成它以恢复页面上的所有标题。

有人可以给我一首歌吗？或者如果有更好的可以给我一个更好的方法吗？

非常感谢。

Answer 1

纯 CSS 怎么样？

.title {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="title">
  I am a somewhat long title, that will not fit on all screens
</div>