我正在尝试使用以下代码在图像上放置一个水印示例(并旋转它),但是当文本大小太大或太长时,单词将自动换行并创建两行。如果我禁用用空格换行: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/

您可以看到它包装成两行,但我希望它停留在一行上并溢出。另外,如果我放在空白处:nowrap,这些单词不会自动换行,但是范围会不断扩大。然后,如果我尝试运行-webkit-transform:rotate(90deg),它现在似乎正在绕着另一个点旋转。

提前致谢!

最佳答案

如果我的问题很好,我想您只需要设置良好的空白

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


See on this fiddle

关于jquery - 允许SPAN溢出其包含的DIV,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11803943/

10-12 12:58
查看更多