压缩文本以适应 CSS

Question

我有一个方形的 Bootstrap 按钮“墙”，下面有一个字体很棒的图标和两行文本 (<span>)。有时，每行的文本可能太长，所以自然换行。我想阻止这种情况。但是，要求必须显示全文。我也不想通过放大单个图块来破坏图块布局。

因此，我的想法是使用 CSS transform: scaleX(?) 来压缩文本以防万一。但我没有参考文本的实际宽度。另外，瓦片的 with 是基于相对单位的，所以我不能使用任何固定的像素值。

这是我当前的 css declamation：

<style>
    .flex-container .btn-lg {
        width: 20vmin;
        height: 20vmin;
        margin: 8px;
        font-size: 3.5vmin;
        word-wrap: break-word;
        white-space: normal;
    }

    .btn-tile > * {
        display: flex;
        justify-content: center;
    }
</style>

<div data-bind="foreach: $data.entries" class="flex-container">
    <button class="btn btn-secondary btn-lg btn-tile storageType-3" data-bind="click: e, class: 'storageType-' + d.type">
        <i class="fas fa-ramp-loading" data-bind="class: d.icon"></i>
        <span data-bind="text: d.desc1"></span>
        <span data-bind="text: d.desc2" style=" /* Experimental */
            transform: scaleX(.8);
            white-space: nowrap;
        ">This text is way too long</span>
    </button>
</div>

如果文本 desc1 或 desc2 太长，则应应用 scaleX，以便它们适合固定大小的按钮。

这甚至可以用纯 CSS 实现，还是我需要用 Javascript 遍历图块，读取实际宽度并计算这样的缩放因子？

顺便说一句，我正在使用淘汰赛绑定。

编辑：

我做了一些实验，但仍然无法计算出正确的比例因子。对于较长的文本，正确的因子应该在 0.3 左右。但它返回 0.477。

1 / $('.btn-tile').first().children().last()[0].scrollWidth * ($('.btn-tile')[0].offsetWidth)

Answer 1

这个想法是使用溢出元素中scrollWidth 和clientWidth 的差异来计算适合整个父元素的理想缩放比例，并将其作为scaleX 变换应用于溢出元素。

不要忘记将变换原点设置在对象的左侧，因为它在右侧溢出。

不幸的是，我认为您不能在纯 CSS 中执行此操作，因为您需要计算 scrollWidth 和 clientWidth。但这里有一个最小的例子来说明如何做到这一点：

els = document.querySelectorAll(".possibly-scaled");
for (let el of els) {
    let xScale = el.clientWidth / el.scrollWidth;
    if (xScale < 1) { 
        el.style.transform = "scaleX(" + xScale + ")";
    }
}

.fixed-width {
    font-size: 30px;
    margin: 8px;
    padding: 4px;
    text-align: center;
    background-color: yellow;

    /* necessary styling */
    width: 80px;
    white-space: nowrap; 
}

.possibly-scaled {
    /* necessary styling */
    display: block;
    transform-origin: 0 0;
}

<div class="fixed-width">
    <span class="possibly-scaled">OK</span>
</div>
<div class="fixed-width">
    <span class="possibly-scaled">Good</span>
</div>
<div class="fixed-width">
    <span class="possibly-scaled">Fantastic!</span>
</div>
<div class="fixed-width">
    <span class="possibly-scaled">Amazingly, this also fits.</span>
</div>

Answer 2

对于即

var x, i;
        x = document.querySelectorAll(".possibly-scaled");
        for (i = 0; i < x.length; i++) {
            //x[i].style.backgroundColor = "red";
            let xScale = x[i].clientWidth / x[i].scrollWidth;
            console.log('aaa' + xScale);
            if (xScale < 1)
                x[i].style.transform = "scaleX(" + xScale + ")";
        }