Question

我有一个高度/宽度固定的容器。容器内将有不同数量的文本，有时超过高度限制。为避免溢出，我使用overflow: hidden;。

我是否可以访问隐藏的文本，然后将其添加到新容器中？

Answer 1

从本文获取帮助：

http://blog.johnavis.com/blog/589/jquery-javascript-plugin-to-truncate-text-to-fit-container-height-and-width/

在这里，我已根据您的需要进行了更改：

$.fn.overflowTo = function(destination, options) {
  if (!options) options = "...";
  return this.each(function(num) {
    var height = parseInt($(this).css("height"));
    var content = $(this).html();
    var extraText = '';
    while (this.scrollHeight > height) {
      extraText = content.match(/\s+\S*$/).join() + extraText;

      content = content.replace(/\s+\S*$/, "");
      $(this).html(content + options);
    }
    $(destination).html(extraText);
  })
}

$(function() {
  $("#divBase").overflowTo($("#divExtra"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divBase" style="float:left;border:solid 1px black;height:100px;width:100px;overflow:hidden;">
  a a a a a a a very very very long long long long text text text text is is is is here here here here here here here here
</div>

<div id="divExtra" style="float:left;border:solid 1px black;height:100px;width:200px;">
</div>

Answer 2

要使标记和样式保留在我们的文本中，我认为这会有所帮助。我将其与其他答案分开，因为某人可能不需要此额外功能并避免了过载。也许有更好的代码或想法，但这是我所能提供的帮助和赞赏。

“功能事件（）”代码段来自：https://stackoverflow.com/a/7924240/5747727

$.fn.overflowTo_WithKeepingTagsAndStyles = function(destination, options) {
  if (!options) options = "...";
  return this.each(function(num) {
    var height = parseInt($(this).css("height"));
    var content = $(this).html();
    var extraText = '';
    var tempDiv = document.createElement("div");
    var strMustOpenTags = "";
    var singletonTags = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "forms", "link", "meta", "param", "source", "track", "wbr"];

    while (this.scrollHeight > height) {
      extraText = content.match(/\s+\S*$/).join() + extraText;
      content = content.replace(/\s+\S*$/, "");

      $(tempDiv).html(content);

      var currentTags = tempDiv.getElementsByTagName("*");
      var strMustCloseTags = "";
      strMustOpenTags = "";

      for (var i = 0; i < currentTags.length; i++) {
        var tag = currentTags[i].tagName;

        if (!singletonTags.includes(tag.toLowerCase()) && occurrences(content, '<' + tag) > occurrences(content, '</' + tag)) {
          strMustCloseTags = "</" + tag + ">" + strMustCloseTags;
          strMustOpenTags = "<" + tag + ">" + strMustOpenTags;
        }
      }
      $(this).html(content + strMustCloseTags + options);
    }
    $(destination).html(strMustOpenTags + extraText);
  });
}

function occurrences(string, subString, allowOverlapping) {

  string += "";
  subString += "";

  string = string.toLowerCase();
  subString = subString.toLowerCase();

  if (subString.length <= 0) return (string.length + 1);

  var n = 0,
    pos = 0,
    step = allowOverlapping ? 1 : subString.length;

  while (true) {
    pos = string.indexOf(subString, pos);
    if (pos >= 0) {
      ++n;
      pos += step;
    } else break;
  }
  return n;
}



$(function() {
  $("#divBase").overflowTo_WithKeepingTagsAndStyles($("#divExtra"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divBase" style="float:left;border:solid 1px black;height:100px;width:100px;overflow:hidden;">
  a a <i> a a <b>a a a very very <u>very</u> long <br/> <br/> long long long text text text text is is is is here <br/> here here </b>here here here</i> here here
</div>

<div id="divExtra" style="float:left;border:solid 1px black;height:100px;width:200px;">
</div>

将隐藏的溢出内容添加到新容器

2 个答案: