How to create a line break instead of having text going on top of itself?


Tags: html,css,text,line-breaks

Problem :

I'm having an issue with some text that doesn't want to create a line break: when narrowing the browser window, it makes the text go on top of itself. How is it possible to fix this?

See the h1 and p text here:

http://jsfiddle.net/wWJqm/ and try resizing down your browser window.

HTML:

<div class="meteor">
    <img width="599" height="400" src="http://imageshack.com/a/img197/9543/2v8z.jpg" />
        <h1><a href="" title="Nulla eu purus et orci">Nulla eu purus et orci</a></h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS:

.meteor h1 {
    position: absolute;
    margin: 0;
    top: 20px;
    left: 30px;
    font-size:24px;
    line-height:1px;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    padding: 2.3%;
    background: #000;
}
.meteor p {
    background: #000;
    top: 50px;
    left: 30px;
    color: #fff;
    line-height:1px;
    margin: 0;
    padding: 2%;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}


Solution :

Try this

.meteor p {
background: #000;
min-height:inherit;
max-height:auto;

top: 50px;
left: 30px;
color: #fff;

margin: 0;
padding: 2%;
position: absolute;
text-align: center;
word-wrap: break-word;
text-shadow: 1px 1px 1px #000;
}

your line height was set to 1px, it was moving, but it was only moving down one pixel which is almost unnoticeable. get rid of the line-height, or change it. Add in a word wrap, and a min/max-width and height is optional too.


    CSS Howto..

    How can I make a color background that expands out of the 960 grid system?

    How to override xhtml theme css?

    how to align text input in Angular-Material tool bar?

    How to display loading.gif at the center of the screen which has a scrollbar

    Jquery: How to check if the element has certain css class/style

    How are these sites implementing their onhover overlays?

    How do I get the boxes to align underneath each other when the screen shrinks (responsive)

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    How do I maintain modularity with mixins?

    How do I assign a class to a jquery button var

    How to create CSS3 bounce effect with PURE CSS

    How to set text area to maximum width in bootstrap

    How to add a mobile optimised external CSS to a Shopify site

    How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?

    How to add an unknown amount of dots to a line depending on length of word?

    How to have a two headings in same line with css?

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to add a:hover css function to this code?

    Overwriting a CSS Class How to?

    How to define margin (CSS) around an absolutely positioned, floating element?

    How is font-size not working here?

    How can I adjust the margins of quote symbols added with CSS

    how to combine multiple css class selectors for jquery buttonset?

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    how to update a css class dynamically onclick a dropdown jquery

    How can I remove a parent with a certain child inside of it (media queries)

    How to center modal window in css+html?

    How to change html (jade template) to use *.min js and css in production?

    bootstrap navbar how to give it a max width

    how to change a css of an input if the value of it is not empty in angularJS