Adding hidden overflowing content to a new container

Question

I have a container with a fixed height/width. Inside the container there will be varied amounts of text, sometimes exceeding the height limit. To avoid overflow, I use overflow: hidden;.

Is there a way for me to access the hidden text and then add it to a new container?

score 0 · Accepted Answer · answered Feb 27 '19 at 12:01

getting help from this article:

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

here I have changed it based on your need:

$.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>

I've accepted your answer as it does answer my question. However it seems this method both removes most of my styling, as well as being immensely slow. Any suggestions with that? — ok34332, Feb 27 '19 at 16:00
I replaced .match(regex) and .replace(regex) with finding last word with content.lastIndexOf(" ") and then substring. but with measuring the execution time nothing notable happened. i can put both methods if you want but i think that could confuse others. — Mazdak, Feb 27 '19 at 16:28
I add another answer for your problem with keeping tag mixed in string. — Mazdak, Feb 27 '19 at 17:56

Mazdak · Answer 2 · 2019-02-27T18:15:36.803

To keep tags and styles those are mixed in our text, I think this can help. I separate it from my own other answer because someone may dose not need this extra functionality and avoid overload. maybe there are better codes or ideas but this is as far as i can help and appreciate any improvements.

"function occurrences()" code snippet is from : 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>

Adding hidden overflowing content to a new container

2 Answers2