截断文本以适合容器的固定高度

时间：2018-10-23 09:31:42

标签： javascript jquery html css

我有一组固定高度框，其中包含文本。框的宽度具有百分比值。

使用jquery的 this piece 将文本截断。

(function($) {
  $.fn.noOverflow = function(ellipsis) {
    if (typeof ellipsis === 'undefined') {
      ellipsis = '';
    }
    return this.each(function() {
      var el = $(this);
      if (typeof this.overflow_text === 'undefined') {
        // store initial text as a property of the current element
        // in order to reuse it if the container is resized
        this.overflow_text = {
          originalText: el.text()
        }
      }
      // create a hidden "puppet" for better user experience
      var t = $(this.cloneNode(true)).hide().css({
        'position': 'absolute',
        'width': 'auto',
        'height': 'auto',
        'overflow': 'visible',
        'max-width': 'inherit',
        'max-height': 'inherit'
      });
      el.after(t);
      var text = this.overflow_text.originalText;
      t.text(text + "");
      // use the puppet to try for the proper text length, removing characters one by one
      // until the puppet will be of designed size
      while (text.length > 0 && (t.width() > el.width() || t.height() > el.height())) {
        text = text.substr(0, text.length - 1);
        t.text(text + ellipsis);
      }
      el.text(t.text());
      // get rid of the puppet
      t.remove();
    });

  };
})(jQuery);

function updateCutoff() {
  $('.txt').noOverflow('...');
}
updateCutoff();
$(window).resize(updateCutoff);
body {
  font-family: Arial, sans-serif;
}
.wrapper {
  border: 2px solid #000;
  width: 25%;
  box-sizing: border-box;
  float: left;
}
.txt {
  font-size: 12px;
  line-height: 1.25;
  display: block;
  overflow: hidden;
  height: 3.75em;
}
@media only screen and (max-width: 767px) {
  .wrapper {
    width: 50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>
</div>

<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit fugiat</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum.</span>
</div>

问题是，即使有很多文本，文本也无法填满整个框的高度。文本停留在一行上。

为什么会这样？

2 个答案:

答案 0 :(得分：0)

问题在于这段代码t.width() > el.width()。它仅考虑一次宽度，但是，如果您有多行，则需要考虑所有行。因此，您将需要修复此部分。

出于说明目的，我将其更改为t.width() > 3 * el.width() 

(function($) {
  $.fn.noOverflow = function(ellipsis) {
    if (typeof ellipsis === 'undefined') {
      ellipsis = '';
    }
    return this.each(function() {
      var el = $(this);
      if (typeof this.overflow_text === 'undefined') {
        // store initial text as a property of the current element
        // in order to reuse it if the container is resized
        this.overflow_text = {
          originalText: el.text()
        }
      }
      // create a hidden "puppet" for better user experience
      var t = $(this.cloneNode(true)).hide().css({
        'position': 'absolute',
        'width': 'auto',
        'height': 'auto',
        'overflow': 'visible',
        'max-width': 'inherit',
        'max-height': 'inherit'
      });
      el.after(t);
      var text = this.overflow_text.originalText;
      t.text(text + "");
      // use the puppet to try for the proper text length, removing characters one by one
      // until the puppet will be of designed size
      while (text.length > 0 && (t.width() > 3 * el.width() || t.height() > el.height())) {
        text = text.substr(0, text.length - 1);
        t.text(text + ellipsis);
      }
      el.text(t.text());
      // get rid of the puppet
      t.remove();
    });

  };
})(jQuery);

function updateCutoff() {
  $('.txt').noOverflow('...');
}
updateCutoff();
$(window).resize(updateCutoff);
body {
  font-family: Arial, sans-serif;
}
.wrapper {
  border: 2px solid #000;
  width: 25%;
  box-sizing: border-box;
  float: left;
}
.txt {
  font-size: 12px;
  line-height: 1.25;
  display: block;
  overflow: hidden;
  height: 3.75em;
}
@media only screen and (max-width: 767px) {
  .wrapper {
    width: 50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>
</div>

<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit fugiat</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum.</span>
</div>

答案 1 :(得分：0)

在条件(text.length > 0 && (t.width() < el.width() || t.height() >= el.height()))期间更改 

(function($) {
  $.fn.noOverflow = function(ellipsis) {
    if (typeof ellipsis === 'undefined') {
      ellipsis = '';
    }
    return this.each(function() {
      var el = $(this);
      if (typeof this.overflow_text === 'undefined') {
        // store initial text as a property of the current element
        // in order to reuse it if the container is resized
        this.overflow_text = {
          originalText: el.text()
        }
      }
      // create a hidden "puppet" for better user experience
      var t = $(this.cloneNode(true)).hide().css({
        'position': 'absolute',
        'width': 'auto',
        'height': 'auto',
        'overflow': 'visible',
        'max-width': 'inherit',
        'max-height': 'inherit'
      });
      el.after(t);
      var text = this.overflow_text.originalText;
      t.text(text + "");
      // use the puppet to try for the proper text length, removing characters one by one
      // until the puppet will be of designed size
      while (text.length > 0 && (t.width() < el.width() || t.height() >= el.height())) {
        text = text.substr(0, text.length - 1);
        t.text(text + ellipsis);
      }
      el.text(t.text());
      // get rid of the puppet
      t.remove();
    });

  };
})(jQuery);

function updateCutoff() {
  $('.txt').noOverflow('...');
}
updateCutoff();
$(window).resize(updateCutoff);
body {
  font-family: Arial, sans-serif;
}
.wrapper {
  border: 2px solid #000;
  width: 25%;
  box-sizing: border-box;
  float: left;
}
.txt {
  font-size: 12px;
  line-height: 1.25;
  display: block;
  overflow: hidden;
  height: 3.75em;
}
@media only screen and (max-width: 767px) {
  .wrapper {
    width: 50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>
</div>

<div class="wrapper">
  <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit fugiat</span>
</div>

<div class="wrapper">
  <span class="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum .</span>
</div>

相关问题
最新问题