Question

我正在寻找一种适用于某个功能的解决方案，以便在加载页面时预先检测到屏幕宽度大小来调用它。

我提供了一个片段来演示正在运行的resize事件，但现在我需要弄清楚如何在加载内容之前检测到屏幕宽度：

function checkWidth() {
  if ($(window).width() < 600) {
    $('#content').addClass('fulltxt');
    $("#content").each(function(i) {
      len = $(this).text().length;
      if (len > 5) {
        $(this).text($(this).text().substr(0, 5) + '...');
      }
    })
  } else {
    $('#content').removeClass('fulltxt');
    $("#content").each(function(i) {
      $(this).text($(this).data('originaltxt'));
    });
  }
}
$("#content").each(function() {
  $(this).data({
    originaltxt: $(this).text()
  });
});
$(window).resize(checkWidth);

#content {
  border: 2px solid green;
  display: inline-block;
  padding: 5px;
}

#content.fulltxt {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">CONDENSE THIS TEXT</div>

Answer 1

也许我让这比我需要的更复杂。在大多数情况下，媒体查询似乎都可以解决问题：

#content {
  max-width: auto;
  overflow: auto;
  white-space: normal;
  background-color: red;
  display: inline-block;
}

@media only screen and (max-width:600px) {
  #content {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: blue;
  }
}

<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>

窗口调整大小事件是否可以检测页面加载时的浏览器屏幕宽度？

1 个答案: