jQuery剪切文本而不切片单词

Question

我知道，这个问题已经被问了好几次了，所以很抱歉重复了，但我似乎无法在这些答案中找到我的问题的解决方案。

我有一个选择的文本，我想在这么多单词之后剪切，然后在点击时，将其余的单词添加回去 - 就像手风琴风格一样。

我已经将文本切成两半，然后使用jQuery将它们重新组合在一起，但它将单词切成两半。我希望它在单词之后被切断。我不确定我这样做的方式是否是最好的方法，所以如果有人有任何其他想法，或者他们是否知道如何在单词之后切断，而不是在中间，那将不胜感激。

$(".about__profiles--team .text").text(function() {
var introText = $(this).text().substring(0, 150);
var panelText = $(this).text().substring(150);
$(this).html('<span class="accordion-button">' + introText + '</span><span class="panel">' + panelText + '</span>');
});
$('.accordion-button').click(function() {
$(this).parent('#accordion').toggleClass('open-accordion');
});

.text {
border-bottom: 1px solid black;
padding-bottom: 30px;
margin-bottom: 0;
position: relative;
}
.accordion-button {
transition: ease 0.4s;
cursor: pointer;
outline-style: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.accordion-button:before {
content: '+';
display: block;
color: black;
height: 10px;
width: 10px;
position: absolute;
bottom: 10px;
right: 0;
transform: rotate(90deg);
transition: ease 0.4s;
}
.panel {
display: none;
transition: ease 0.4s;
}
.open-accordion > .accordion-button:before {
transform: rotate(-90deg) !important;
}
.open-accordion > .panel {
display: inline !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="about__profiles--team">
<h3 class="job-title">Title</h3>
<h2 class="name">LOREM IPSUM</h2>
<div class="text" id="accordion">Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris tri accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ul, consectetur adipiscing Mauris tristique eu orci ac sodales. Vestibulum id accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ultrices, id porta arcu viverra. Nunc pia enim, id egestas dolor bibendum nec.</div>
</div>

谢谢

Answer 1

只是在下一个空格的单词中间切开。所以作为最简单的方法更换

var introText = $(this).text().substring(0, 150);
var panelText = $(this).text().substring(150)

跟

var index = $(this).text().indexOf(' ', 150);
var introText = $(this).text();
var panelText = '';
if(index !== -1)
{
var introText = $(this).text().substring(0, index);
var panelText = $(this).text().substring(index+1);
}

请注意，这是非常基本的。您也可以按"."，"，""等进行拆分。而且我不确定 150 是否是正确的选择