无法将文本调整为 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>

第二列中的文本应显示为 "here's some(linebreak)other text please work somehow!"，所有文本的大小应调整为列宽的 100%

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

我在测试 fittext.js & bigtext.js

时遇到了同样的问题

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

Answer 1

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

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();

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

Unable to resize text to widths of Foundation divs

javascript

css

zurb-foundation