截断文本并根据需要进行恢复

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 {
      // ??
    }
 }

您好，

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

有人可以给我一个曲目吗？或者如果有更好的方法，可以给我一个更好的方法吗？

非常感谢。

Answer 1

纯CSS怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我强烈建议您使用纯css进行此操作，但如果您确实需要这样做，则可以使用属性或数据属性来保存原始文本。

＆＃13;

＆＃13;

$("#test").on("change", function() {

  if (this.checked) {

    $('.title').text(function(i, orgText) {
      var elem = $(this);
      if (!elem.data("orgText")) {
        elem.data("orgText", orgText);
      }
      return (orgText.length >= 35) ? orgText.substring(0, 35) + "…" : orgText;
    });

  } else {

    $('.title').text(function(i, text) {
      return $(this).data("orgText") || text;
    });

  }


}).change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="title">12345678901234567890123456789012345678901234567890</h3>
<h3 class="title">1234567890123456789012345678901234567890</h3>
<h3 class="title">1234567890</h3>

<input type="checkbox" id="test" checked>
<label for="test">shrink</label>

＆＃13;

＆＃13;

＆＃13;