I am attempting to add a watermark sample over an image (and rotate it) using the code below. However, I am encountering issues when the text size is too large or lengthy, causing the words to wrap and create two lines. If I disable wrapping with white-space: nowrap, the text will rotate around a different point if the span becomes too big.
<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>
Here is the CSS used:
.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;
}
Users have the ability to customize the Sample Watermark text, but if it becomes lengthy, the words may wrap. If a single long word is input, it can expand the containing divs, causing the pivot point during rotation to be incorrect. Ideally, I would like overflowing text to hide so such issues do not occur.
A demo showcasing the problem can be found here: http://jsfiddle.net/yu9Mu/
In the example, you can observe that the text wraps to two lines, whereas I aim for it to remain on one line and overflow. When applying white-space: nowrap, the words do not wrap, however, the span expands infinitely. Moreover, employing -webkit-transform: rotate(90deg) causes the text to rotate around a different point.
Thank you in advance for your assistance!