Question

在CSS（如果不是JavaScript的话）中，是否可以缩小溢出其容器的内容，而不是隐藏它？

我有一个带有一些文字等的盒子，当视口变小时，盒子的宽度缩小，并且高度也受到限制。所有内容都需要保持可见，但要在范围之内。滚动不是一种选择。

body {
  background-color: mediumaquamarine;
}

div {
  width: 300px;
  height: 150px;
  overflow: hidden;
  background-color: #fff;
}

<div>
  <h1>example title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
  <button>a button</button>
</div>

Answer 1

嗯，这个问题还不清楚，但是您可以考虑使用viewport width字体大小。它将根据屏幕尺寸进行调整：

body {
  background-color: mediumaquamarine;
}

div {
  width: 300px;
  height: 150px;
  overflow: hidden;
  background-color: #fff;
  font-size: 1.3vw;
}
button {
  font-size: 1.3vw;
}

<div>
  <h1>example title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
  <button>a button</button>
</div>

Answer 2

使用此功能调整font-size内span的{{1}}：

div

function adjustHeights(elem) {
  var fontstep = 2;
  if ($(elem).height() > $(elem).parent().height() || $(elem).width() > $(elem).parent().width()) {
    $(elem).css('font-size', (($(elem).css('font-size').substr(0, 2) - fontstep)) + 'px').css('line-height', (($(elem).css('font-size').substr(0, 2))) + 'px');
    adjustHeights(elem);
  }
}

div {
  position: fixed;
  width: 200px;
  height: 100px;
  border: 1px solid blue;
  padding: 1px;
  overflow-wrap: break-word;
}

JSFiddle：http://jsfiddle.net/e8B9j/1390/

Answer 3

带有文本元素的SVG。

使用可扩展文本制作svg。

最终将很难阅读。

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

非样式示例 https://jsfiddle.net/k8L4xLLa/32/

酷风格的示例 https://jsfiddle.net/k8L4xLLa/14/

您可以在需要时使用媒体查询来更改字体大小。

老实说，考虑使用flexbox。它是一种更清洁的解决方案，不会使文本可伸缩。然后，当元素太小时，可以对其进行包装。：）

缩小溢出的内容以适合容器？

3 个答案: