Question

我正在尝试使用以下代码在图像上放置一个样本水印（并旋转它），但是当文本大小太大或太长时，单词将换行并创建两行。如果我使用white-space：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;
}

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

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

你可以看到它包装到两行，但我希望它保持在一行并溢出。此外，如果我穿上白色空间：nowrap，单词不会换行，但跨度不断扩大。然后，如果我尝试运行-webkit-transform：rotate（90deg），它现在看起来围绕另一个点旋转。

提前致谢！

Answer 1

如果我的问题很好，我认为你只需要设置好的空白区域

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

See on this fiddle

Answer 2

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

添加

 white-space: nowrap;

到水印

允许SPAN溢出其包含的DIV

2 个答案: