如何为每个append（）div

Question

＆＃13;

＆＃13;

var p=$('.Tex_1st_con_mes p');
  while ($(p).outerHeight()>80) {
   $(p).text(function (index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
   });
  }

$(document).on('click','button',function(){
  $('body').append('<div class="Tex_1st_con_mes"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>')
});

＆＃13;

.Tex_1st_con_mes
{
    position:relative;
    top:5px;
    left:2px;
    max-width:390px;
    font-family:Arial;
    word-wrap:break-word;
    overflow-wrap:break-word;
    font-size:13px;
    line-height:20px;
    max-height:80px;
    overflow:hidden;
    border:1px solid #000;
    margin-bottom:5px;
}
.Tex_1st_con_mes p
{
    margin:0;
    padding:5px;
}
button
{
    position:absolute;
    left:420px;
    top:15px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Tex_1st_con_mes">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.        Lorem Ipsum has been the industry's standard dummy text ever since the            1500s, when an unknown printer took a galley of type and scrambled it to          make a type specimen book. It has survived not only five centuries, but            also the leap into electronic typesetting, remaining essentially                  unchanged. It was popularised in the 1960s with the release of Letraset            sheets containing Lorem Ipsum passages, and more recently with desktop            publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
</div>
<button>Add new text</button>

＆＃13;

＆＃13;

＆＃13;

您好， 如果.Tex_1st_con_mes p大于80px文字被隐藏并显示＆＃39; ...＆＃39;，但当我追加相同的课程时，它就无法正常工作。

我的问题：如果我附加此代码，该怎么做？＆＃39; ...＆＃39;将会呈现。我应该使用$(this)，但我不知道如何

Answer 1

问题是你只在页面加载时进行替换，并且在添加新文本后不执行它。

＆＃13;

＆＃13;

$(document).ready(function() {
  toggleHeight();

  $(document).on('click', 'button', function() {
    $('body').append($('#template').html());
    toggleHeight();
  });
})

function toggleHeight() {
  $('.Tex_1st_con_mes.new').removeClass('new').find('p').each(function() {
    if ($(this).outerHeight() > 80) {
      var newContent = $(this).text();
      newContent = newContent.substring(newContent.indexOf('.') + 2)+'...';
      $(this).text(newContent);
    }
  });
}

＆＃13;

.Tex_1st_con_mes {
  position: relative;
  top: 5px;
  left: 2px;
  max-width: 390px;
  font-family: Arial;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 13px;
  line-height: 20px;
  max-height: 80px;
  overflow: hidden;
  border: 1px solid #000;
  margin-bottom: 5px;
}
.Tex_1st_con_mes p {
  margin: 0;
  padding: 5px;
}
button {
  position: absolute;
  left: 420px;
  top: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Tex_1st_con_mes new"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
<button>Add new text</button>

<script type="text/template" id="template">
<div class="Tex_1st_con_mes new"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

每次完成追加时，您都需要调用以下代码。

var p=$('.Tex_1st_con_mes p');
  while ($(p).outerHeight()>80) {
   $(p).text(function (index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
   });
  }

我建议创建此代码的函数，然后在每次成功追加后调用该函数。

Answer 3

您可以使用each循环播放元素，检查outerHeight并更改文字：

$('.Tex_1st_con_mes p').each(function() {
 var $this = $(this);
 if ($this.outerHeight() > 80) {
  $this.text($this.text().replace(/\W*\s(\S)*$/, '...'));
 }
}