空白nowrap文本适合div

时间:2014-07-09 08:32:00

标签: html css

我有一个固定宽度的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>

5 个答案:

答案 0 :(得分:2)

试试这个:

<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>

答案 1 :(得分:1)

请尝试以下操作: Demo

的CSS:

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

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

答案 2 :(得分:0)

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

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

你会添加javascript:

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

您还需要保留css属性

.truncate{
    white-space: nowrap;
}

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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