如何解决将容器收缩为自动换行文本,检测自动换行
我发现所有解决方案都是基于检测到换行符来将父容器收缩到单词包装的内部文本。但是如果文本已经被单词包装成多行怎么办。有没有办法检测现有换行符中的自动换行?
这个小提琴,带有问题,现有的和所需的解决方案:
https://jsfiddle.net/Spica2/4snk6up8/
(我不认为有CSS解决方案,但是如果有人知道,这将是首选。)
<p>plain html:</p>
<div class="container">
<span>d</span>
<span class="red">Patentierung und neue Technologien</span>
<span>b</span>
</div>
<p>by script:</p>
<div class="container">
<span>d</span>
<span class="shrink red">Patentierung und neue Technologien</span>
<span>b</span>
</div>
<p>desired (yet faked with br):</p>
<div class="container">
<span>d</span>
<span class="red">Patentierung und neue <br>Technologien</span>
<span>b</span>
</div>
.container {
display:flex;
width: 13rem;
background: #ccc;
line-height: 1.14; /*needed to calculate the lineHeightParsed*/
}
.red {
border: 1px solid red;
}
var d = document.querySelectorAll('.shrink'),i,w,width,height;
for(i = 0; i < d.length; i++) {
width = d[i].offsetWidth;
height = d[i].offsetHeight;
const { lineHeight } = getComputedStyle(d[i]);
const lineHeightParsed = parseInt(lineHeight.split('px')[0]);
if (lineHeightParsed <= height) {
for (w = width; w; w--) {
d[i].style.width = w + 'px';
if (d[i].offsetHeight !== height) {
d[i].style.width = w + 1 + 'px';
break
};
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。