空白nowrap文本适合div

Question

我有一个固定宽度的div和一个很长的文本。此长文本设置为显示在 通过white-space: no-wrap一行。问题是，我无法弄清楚如何使这个文本的字体大小适合div（不对文本进行中断）。有人可以帮忙吗？

示例布局：

<div style="width: 100px; max-width: 100px;">
  <span style="white-space: nowrap">This is a too long text to normally fit in</span>
</div>

Answer 1

试试这个：

<div style="width: 100px; max-width: 100px;overflow: hidden;text-overflow: ellipsis;">
   <span style="white-space: nowrap">This is a too long text to normally fit in</span>
</div>

Answer 2

请尝试以下操作： Demo

的CSS：

.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

文本将在1行中，但在上面的css代码中，如果超过指定宽度，则可以看到点（...）

Answer 3

如果你被允许在你的项目中添加一些库，那么这个就可以了：

https://github.com/jquery-textfill/jquery-textfill

你会添加javascript：

$('.truncate').textfill({ widthOnly: 100px });

您还需要保留css属性

.truncate{
    white-space: nowrap;
}

Answer 4

设置字体大小 <span style="font-size:17px;white-space: nowrap;">This is a too long text to normally fit in</span>

Answer 5

我认为另一个人与你的请求完全相同。看看this topic已找到几个jQuery / CSS解决方案。