CSS＆amp; AngularJS：如何根据容器大小设置元素的内容（例如文本）大小？

Question

我找到了这个答案：How to scale text size compared to container 但它实际上使用Javascript，看起来像一个单词。我还找到了这个库：http://fittextjs.com/。

我有一个像这样的容器：

<div id="top-bar">
    <div id="element-1" class="element-contained">{{text1}}</div>
    <div id="element-2" class="element-contained">{{text2}}</div>
    <div id="element-3" class="element-contained">{{text3}}</div>
</div>

#top-bar{
   height: 50px;
   width: 100%;
}

.element_contained{
    margin: 10px;
    width: 30%;
}

鉴于{{text1 / 2/3}}是可变的（根据用户选择的语言，屏幕分辨率和随时间更新的实际文本），如何动态调整 width < / strong>和高度（可能没有JS）这些文本的方式是不会自动换行或被剪切？