CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Glen Takahashi
Glen Takahashi

Reputation: 881

Allow a SPAN to overflow its containing DIV

I'm trying to place a sample watermark over an image (and rotate it) using the following code, but when the text size is too large or too long, the words will wrap and create two lines. If i disable wrapping with white-space: nowrap, the text will now 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>

The css is

.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 are able to alter the Sample Watermark text, but if it gets too long or too large, the words will begin to wrap. If i type out one really really long word, it will expand the containing divs, and if I try to rotate that text, the pivot point will no longer be correct. Also, I would like it to just hide overflowing text so that wouldn't happen.

I've created a demo here: http://jsfiddle.net/yu9Mu/

You can see that it wraps to two lines, but i want it to stay on one line and overflow. Also, if i put on white-space: nowrap, the words do not wrap, but the span keeps expanding. Then, if i try to run a -webkit-transform: rotate(90deg), it now appears to be rotating around a different point.

Thanks in advance!

Upvotes: 1

Views: 1215

Answers (2)

Xhynk
Xhynk

Reputation: 13840

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

add

 white-space: nowrap;

to the watermark

Upvotes: 1

Jerska
Jerska

Reputation: 12002

If I got your question well I think you just need to set the good white-space

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

See on this fiddle

Upvotes: 2

Related Questions