html - 如何在css转换规模操作上保持空白换行

当我克隆我的

<div id="orig" class="content">this is just some content</div>

并将其附加到较小的固定大小的容器中，以使其适合使用CSS

#clone {
    transform: translate(...) scale(...)
}

那么即使原始比例缩放使元素完全适合原始的空白换行，这也会与原始的空白换行混淆。

我知道为什么会发生这种情况，但是我需要找到一种避免这种情况的方法。

换一种说法：

鉴于小提琴http://jsfiddle.net/JAS2K/5/

我需要红色#badwrap1看起来像下面的灰色#desiredwrap（即具有相同的空白换行符），即使它是固定大小容器的子代也是如此。

最佳答案

jsFiddle Demo

稍微更改了DOM和CSS即可正常工作。

HTML：

<div id="container1" class="content scaled">
    this is just some content
</div>

CSS：

.content {
    background-color:#DDD;
    width:100px;
    height:100px;
    min-height:40px;
}
#container1 {
    display:inline-block;
    background-color:red;
}
.scaled {
    -webkit-transform:translate(-25%, 0) scale(0.5, 1);
    transform: translate(-25%, 0) scale(0.5, 1);
}

关于html - 如何在css转换规模操作上保持空白换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18601536/