我这里有一个独特的案例。所以我有 2 个 div，一个在左边，一个在右边。我怎样才能做到这一点，如果左边 div 的高度超过右边 div 的高度，函数应该使高度相等并隐藏左边 div 的任何文本。因此，如果我计算加载时的偏移高度，右边的一个是 443 px，左边的一个是 583 px，它应该使两个高度相等，并且高度为左边数据的其余 140px。
我创建了一个 pen
var text = document.getElementById('overflow_text')
function mounted() {
var toggleBtn = document.getElementById('toggle_text')
var offsetDiv = document.getElementById('offset_height')
var offsetDivHeight = offsetDiv.offsetHeight + 'px'
var textHeight = text.offsetHeight + 'px'
console.log(textHeight)
console.log(offsetDivHeight)
if (textHeight > offsetHeight) {
text.style.maxHeight = offsetDivHeight
text.style.overflow = 'hidden'
text.style.textOverflow = 'ellipsis'
text.style.whiteSpace = 'nowrap'
}
}#toggle_text {
cursor: pointer;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body onLoad='mounted()'>
<div class="container">
<div class="row">
<div class="col-md-6">
<p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec</p>
<span onClick="myFunction()" id="toggle_text">Read More</span>
</div>
<div class="col-md-6">
<p id="offset_height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl estDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est </p>
</div>
</div>
</div>
</body>因此，如果您检查控制台，您将看到两个 div 的高度是多少。不确定如何通过 Javascript 设置 CSS。先感谢您。 如果有人对如何实现这一目标有任何其他想法，我愿意接受建议。
最佳答案
解决方案有点棘手，因为如果您的文本有多行，您不能简单地使用 textOverflow: ellipsis css 属性。
首先，我们将 left 文本容器的 height 设置为 right 的高度，后者较小。然后我们必须缩小左侧容器内显示的单词数。我们从容器的末尾删除单词，直到容器的 scrollHeight 小于或等于容器的高度。
通过这种方式，我们知道容器只能显示它能够显示的字数，并限制它不比正确的容器高。
缺点是我们从元素中删除了溢出的单词，因此您无法再从该容器中获取原始内容。
function mounted() {
var leftContainer = document.getElementById('overflow_text')
var rightContainer = document.getElementById('offset_height')
var rightOffsetHeight = rightContainer.offsetHeight;
var leftOffsetHeight = leftContainer.offsetHeight;
if (leftOffsetHeight > rightOffsetHeight) {
leftContainer.style.height = rightOffsetHeight + "px"
var wordArray = leftContainer.innerHTML.split(' ');
while(leftContainer.scrollHeight > leftContainer.offsetHeight) {
wordArray.pop();
leftContainer.innerHTML = wordArray.join(' ') + '...';
}
}
}
关于javascript - 如何使用 Javascript 基于另一个 div 设置 div 的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57226454/