Menu
How do I center text with css so it overflows both left and right? I see questions here that make text overflow left instead of right, but I want it to look like the text is zoomed in.
<body>
<div class="page">
SOMEHEADER
</div>
</body>
-
.page {
overflow:hidden;
width:70%;
text-align:center;
margin:0 auto;
font-size:8em;
word-wrap:none;
}
Here's a fiddle with a demo of what I'm talking about.
990
In order to suggest that some text be justified on both sides, you can use the align="justify" attribute in HTML, or the text-align:justify declaration in CSS, or both.
To have text-overflow property used, the text element must first overflow. This can be done by preventing the element from wrapping the overflowed content to a new line, which can be done by setting white-space: nowrap . Additionally overflow must be set to hidden .
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
Not the most elegant solution, but it seems to work.
HTML:
<div class="page">
<div>
SOMEHEADER
</div>
</div>
CSS:
.page > div {
margin: 0 -1000%;
}
Example: http://jsfiddle.net/grc4/w36mX/
This method works by stretching the inner div such that it is wide enough to fit its content completely (without wrapping/overflowing). The content is then centred (text-align: center) and clipped to size by the outer div (overflow: hidden).
The tricky part is to make the inner div wide enough to fit the text. Whenever it isn't wide enough, the text will overflow to the right so that it's not properly centred (as seen in your original jsFiddle).
By using negative margins, you can stretch the element by a certain amount to both the left and the right. If you know that the size of the text is 400px for example, then you could use margin: 0 -200px to ensure that the inner div is always at least 400px wide (200px to the left and 200px to the right). When you don't know the exact size of the text, you could either use percentages or a really high px value.
margin: 0 -100% would stretch the div by 100% of its original size to the left and 100% again to the right, making it 3 times larger than the .page div is. The text is about 900px wide, so this method would stop working if the .page div got below 300px wide (try resizing your browser in jsFiddle with margin: 0 -100% to see what I mean).
margin: 0 -1000% stretches the div to make it 21 times larger, which is usually enough to fit the text.
166
See this demo: http://jsfiddle.net/QZCuY/3/ I've tested it in latest Chrome, FF and IE7-9
HTML(<div class="text"> added):
<div class="page">
<div class="text">
SOMEHEADER
</div>
</div>
<p>
How do I get the header to overflow left <u>and</u> right instead of just to the right?
</p>
CSS (.page has two new properties and new .text class):
body {
background-color:green;
}
.page {
position:relative;
height:1em;
overflow:hidden;
background-color:red;
width:70%;
text-align:center;
margin:0 auto;
font-size:8em;
word-wrap:none;
}
p {
width:70%;
margin:50px auto 0;
text-align:center;
font-size:2em;
}
.text {
position:absolute;
right:-50%;
left:-50%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
