文章/答案/技术大牛

发布

社区首页 >问答首页 >压缩文本以适应CSS

问压缩文本以适应CSS
EN

Stack Overflow用户

提问于 2019-09-16 12:56:25

回答 2查看 2.3K关注 0票数 2

我有一个“墙”的quare大小的启动按钮与一个火锅图标和两行文本(<span>)下面。有时，每一行的文本可能太长，所以它自然包装。我想阻止这一切。然而，这是一个要求，必须显示全文。我也不想打破瓷砖布局放大单个瓷砖。

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

下面是我当前的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迭代这些块，读取实际宽度并像这样计算缩放因子呢？

顺便说一下，我用的是敲除装订。

编辑：

我做了一些实验，但仍然不能计算出正确的缩放因子。对于较长的文本，正确的因素应该在.3附近。但是它返回0.477。

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

css

knockout.js

css-transforms

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-16 13:39:58

其思想是利用溢出元素中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>

票数 2

Stack Overflow用户

发布于 2020-09-10 00:54:57

为ie

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 + ")";
        }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57957383

复制

相似问题

问压缩文本以适应CSS
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问压缩文本以适应CSSEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问压缩文本以适应CSS
EN