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