html – 将包含元素的文本强制包装到max-width

前端之家收集整理的这篇文章主要介绍了html – 将包含元素的文本强制包装到max-width前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有几个div都被设计为内联块,因此彼此相邻排成一排.这些div的最大宽度为140px,并包含导致它们的宽度变化到该大小的文本.

As demonstrated in this fiddle,比max-width属性更宽的文本包装,正如您所期望的那样.问题是,它似乎也强制其容器div保持在最大宽度,即使包装文本在技术上不需要那么多空间.

有没有跨浏览器,HTML / CSS的方法,一旦文本换行,将这些块“收缩包装”到它们的最小宽度?我知道我可以用适当放置的< br>来强制它,但这些块应该包含用户输入的文本.

.block {
    display: inline-block;
    vertical-align: top;
    max-width: 140px;
    background-color: lightgrey;
    text-align: center;
}
<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregIoUs demonstrative amount of text</div>

解决方法

@BoltClock在 https://stackoverflow.com/a/12377883/3903374很好地解释了这个问题

您唯一的选择是JavaScript.

您可以通过缩小每个div的宽度直到其高度变化来实现:

var d = document.querySelectorAll('.block'),i,w,width,height;

for(i = 0 ; i < d.length ; i++) {
  width= d[i].offsetWidth;
  height= d[i].offsetHeight;
  
  for(w = width ; w ; w--) {
    d[i].style.width= w+'px';
    if(d[i].offsetHeight !== height) break;
  }
  d[i].style.width= (w+1)+'px';
}
.block {
    display: inline-block;
    vertical-align: top;
    max-width: 140px;
    background-color: lightgrey;
    text-align: center;
}
<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregIoUs demonstrative amount of text</div>
原文链接:https://www.f2er.com/html/232142.html

猜你在找的HTML相关文章