javascript - 无法将文本调整为 Foundation div 的宽度

Question

看起来 slabtext.js 无法以某种方式看到基础 div 的宽度。我一直在尝试在加载后调整大小和类似的东西，但我无法获得好的结果。尽可能简单

<div class="row">
<div class="small-6 columns">
    <h1>HEre's Some Text to fill things up and look great'</h1>
</div>
<div class="small-6 columns">
    <h1>
<span class="slabtext">here's some</span><span class="slabtext">other text please work somehow!</span>
    </h1>
</div>

第二列中的文本应为“这里是一些(换行符)其他文本，请以某种方式工作!”并且所有文本的大小都应调整为列宽的 100%

这是一个 fiddle ... https://jsfiddle.net/scotnery/wf9egscs/9/

我在测试 fittext.js 和 bigtext.js 时遇到了同样的问题

请问如何修改 JS 或 CSS 以获得正确的大小？

Answer 1

在你的代码中添加一个简单的table，就像我做的那样，你可以看到，像这样。看这里jsfiddle .虽然表不应该这样使用，但它解决了这种情况下的问题。

HTML

<div class="row">
  <div class="small-6 columns">
    <h1>HEre's Some Text to fill things up and look great'</h1>
  </div>
  <div class="small-6 columns">
    <h1>
    <table>
      <tbody>
        <tr>
          <td><span class="slabtext">here's some</span></td>
        </tr>
        <tr>
          <td><span class="slabtext">other text please work somehow!</span></td>
        </tr>
      </tbody>
    </table>
    </h1>
  </div>
</div>

CSS

h1{
  line-height: .85;
}

Javascript

$(document).foundation();
$("h1").slabText();