javascript - 挤压文本以适合 CSS

Question

我有一堵方形大小的 Bootstrap 按钮“墙”，下面有一个漂亮的图标和两行文本 ( <span> )。有时，每行的文本可能太长，因此会自然换行。我想阻止这种情况发生。但是，要求必须显示全文。我也不想通过放大单个图 block 来破坏图 block 布局。

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

这是我当前的 css 声明:

<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 迭代图 block ，读取实际宽度并计算缩放因子？

顺便说一句，我正在使用 knockout 绑定(bind)。

编辑:

我做了一些实验，但我仍然无法计算出正确的缩放因子。对于较长的文本，正确的系数应约为 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>