使用一致的软包装以HTML格式进行响应式字体调整

我有一个盒子（div）的页面。 框尺寸基于视口尺寸的百分比。 这些框内有不同数量的文字。 我已经写了一个函数，尝试不同的字体大小，直到文本适合每个框。 一个包含更多文本的框会获得更小的“em”字体大小。

我还加载了一个插件，根据它的宽度改变我的身体的字体大小。

大多数情况下，它的效果很好，除了某些文本片段，有时我会遇到线条缠绕的问题。 当我调整页面大小时，字体有时会被px的一小部分调整，这足以将文本推送到一个新行中，以便在不同的点处进行换行。

有什么方法来响应性地调整我的文本的大小，同时确保文本在一致点处换行？

这里有些例子...

https://jsfiddle.net/geu643h9/

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    /*
     * FlowType.JS v1.1
     * Copyright 2013-2014, Simple Focus http://simplefocus.com/
     */
    (function($) {
        $.fn.flowtype = function(options) {

            var settings = $.extend({
                        maximum   : 9999,
                        minimum   : 1,
                        maxFont   : 9999,
                        minFont   : 1,
                        fontRatio : 35
                    }, options),

                    changes = function(el) {
                        var $el = $(el);
                        var elw = $el.width();
                        var width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw;
                        var fontBase = width / settings.fontRatio;
                        var fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;

                        $el.css('font-size', fontSize + 'px');
                    };


            return this.each(function() {
                var that = this;
                $(window).resize(function(){changes(that);});
                changes(this);
            });
        };
    }(jQuery));
</script>

<div id="flowtype">
    <div style="font-size:1em; position:fixed; left:5; right:45%;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div style="font-size:0.93em;  position:fixed; left:55%; right:5%;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

<script>
    $('#flowtype').flowtype();

</script>

在这个例子中，有两个框分别占用一半的页面。 在左边，文本在1em，右边在0.93em。 当您调整页面大小时，两个文本都会跳转并在不同的点进行换行。 特别是右手一个。 如果您没有复制该问题，请尝试调整速度非常缓慢。 有时它只发生在特定的点。

http://simplefocus.com/flowtype/同样的问题发生在上面的链接上，特别是在第二和第三段。

我认为唯一的解决办法是以某种方式一次追加一个字符到一个div，因为身高的变化我知道这个角色引起了一个包裹，然后我可以在那一刻或之前它，并希望避免让浏览器自动决定软包装的放置位置。 这看起来很诡异，但我的选择是什么？

基本上我想写一堆文本到div，然后调整div的大小，就像我在图像中缩放文本一样。 文本不会随着尺寸的变化而重排，但会在保持宽高比的同时伸展。 我已经尝试过CSS矩阵变换。 它只是缩放div，使文本内容重新回到新的维度。 唯一的选择是将文本字面存储到图像中吗？ 有画布的东西？ SVG？ 有什么选择？

编辑：进一步澄清 - 这不是特定于“时间”。 在这里，我已经将字体大小硬编码为16.1px，这正好在它正好包装的地方。 通过在检查器中编辑将字体大小增加到16.2px，将其推到边缘，并更改包装：

16.1px

16.2px

链接地址: http://www.djcxy.com/p/87507.html

上一篇: Responsive font sizing in HTML with consistent soft wraps

下一篇: Letter spacing and Font size for limited amount of characters