Question

以前曾经问过，但解决方案对我不起作用，所以我正在寻找一个有效的

我正在建立的网站上有一个事件公告块，但客户希望事件日期填满容器的整个宽度。它只适用于一个事件日期，但当然如果其他日期弹出它会有2行我想到但我不知道如何使这个响应。有什么想法吗？

Answer 1

如果在缩放文本中不需要文本换行，可以使用SVG（IE9 +，完全可以接受）：

<div class="element" style="width: 30%">
  <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>
<div class="element" style="width: 60%">
  <svg class="scaled" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>

使用这个CSS：

.element {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.scaled {
  width: 100%;
}

https://jsfiddle.net/93bLu80k/1/

在某些版本的Safari和Internet Explorer中，您可能会遇到SVG垂直扩展的问题（我不记得究竟是哪个版本）。我在我的一些项目中使用了这个代码，其中包含用于Safari的缩放SVG：

svg {
  // hack to make safari use the correct height of svg
  // https://bugs.webkit.org/show_bug.cgi?id=82489
  max-height: 100%;
}

这个适用于Internet Explorer的SASS mixin，您必须提前知道SVG的宽高比，这通常不是问题：

@mixin aspect-ratio($ratio) {
  .ie & {
    padding-bottom: 100% * $ratio - 0.02;
    height: 1px;
    overflow: visible;
    box-sizing: content-box;
  }
}

（您可以将此mixin转换为另一个预处理器，或者只是在普通的CSS类中使用硬编码的$ratio。）

Answer 2

我在倒计时时有类似的问题： http://demos.artbees.net/jupiter5/shortcodes/countdowns-milestones/

我使用的方法是使用元素查询：http://elementqueries.com/

它解决了宽度相对论范围的问题。我们的组件由客户使用，他们选择将在网格中占用的列数。在这种不可预测的情况下，这是您最好的选择。此外，如果您想要封装组件末端，请使其更具可重用性。

是否可以根据其父类的宽度调整字体大小

2 个答案: