html - 如何在 css-transform 缩放操作中保持空格换行

Question

当我克隆我的

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

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

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

那么这会与原始的空白换行混淆，即使在给定原始空白换行的情况下，比例尺使元素完美契合。

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

换句话说：

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

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

Answer 1

jsFiddle 演示

稍微改变了你的 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);
}