0

我正在尝试使用以下代码在图像上放置示例水印（并旋转它），但是当文本大小过大或过长时，文字将换行并创建两行。如果我禁用空格换行：nowrap，如果跨度变得太大，文本现在将围绕不同的点旋转。

<div class="customize-preview">
    <img src="{{ sample_image }}" id="sample-image" class="customize-image" />
    <div class="customize-overlay">
        <div style="display: table;" class="customize-overlay">
            <div style="display: table-row;">
                <div style="display: table-cell;" class="customize-watermark" id="watermark">
                    <span>Sample Watermark</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS是

.customize-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
}

用户可以更改示例水印文本，但如果它变得太长或太大，文字将开始换行。如果我输入一个非常长的单词，它将扩展包含的 div，如果我尝试旋转该文本，则枢轴点将不再正确。另外，我希望它只是隐藏溢出的文本，这样就不会发生。

我在这里创建了一个演示：http: //jsfiddle.net/yu9Mu/

您可以看到它换成了两行，但我希望它保持在一行并溢出。另外，如果我加上 white-space: nowrap，单词不会换行，但跨度会不断扩大。然后，如果我尝试运行 -webkit-transform:rotate(90deg)，它现在似乎围绕不同的点旋转。

提前致谢！

4

2 回答 2

1

如果我很好地回答了您的问题，我认为您只需要设置好的空白

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
    white-space: nowrap;
}

看这个小提琴

于 2012-08-03T22:12:44.140 回答
0

http://jsfiddle.net/demchak_alex/yu9Mu/3/

添加

 white-space: nowrap;

到水印

于 2012-08-03T22:15:59.783 回答