javascript - 缩放固定宽度的字体以适应一行中恒定数量的字符

Question

我有一个基于 websocket 的终端 session 。我希望增加字体大小以填充 div，使其始终为 80 个字符宽。这样做的最佳方法是什么？如果有一种纯 CSS 的方式来做到这一点，我会很高兴，但我已经在使用 jQuery，所以普通的 javascript 或 jQuery 解决方案也不错。

Answer 1

这是一个基于 the8472 的纯 CSS 示例的回答:

div,textarea{
    width:100%;
    max-width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family:  "Lucida Console", Monaco, monospace;
    font-size: 1.99vw; /* The text overflows in safari using (int)2 */
    white-space: nowrap;
    overflow-x:hidden;

    /* styling */ 
    background:#09f;
    min-height: 100px;
    margin-bottom: 30px;
}

它是如何工作的？

要获得正确的字体大小，请将 160 除以您希望每行适合的字符数减去 0.01。

http://jsfiddle.net/mb2L4mee/1/

在 Chrome、FF 和 Safari 中测试。