Description not "wrapping" in boxxy box

Question

I have a boxxy box with CSS that I have some information in. I have a string in it called "description", that is running outside of the box (it gets cut off, so it isn't running outside of the box, but only the first line is showing), instead of wrapping:

Diagram:

What it is:

[heyooo this is a] 
[                ]

What I want:

[heyooo this is a]
[sentence        ]

This is the html in my view:

<div id="boxxy-list">           
    <ul class="additional-artists">
    @foreach ($artists as $artist)
        <li>
        <div class="boxxy">
            <a href="/artists/{{$artist->id}}" class="anchor-hover">
            <img src="{{ $artist->image_path}}" alt="{{$artist->stage_name}}" height="200" width="200">
            <span class="details">
                <h2>{{$artist->stage_name}}</h2>
                <p class="desc">{{$artist->description}}</p> //this is the portion that is not wrapping like it should.
                <span class="pupdate">{{ $artist->city}}, {{ $artist->state}}</span>
                <span class="viewlink">Play My City</span>
            </span>
            </a>
        </div>
        </li>

    @endforeach

    </ul>
    </div> 

CSS:

.boxxy { display: block; margin: 0 auto; background:#fff; margin-bottom: 22px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); width: 200px; padding:7px 7px;
        transition: box-shadow 0.3s linear 0s; -webkit-
        transition: box-shadow 0.3s linear 0s; -moz-
        transition: box-shadow 0.3s linear 0s;
        -o-transition: box-shadow 0.3s linear 0s;
}

.anchor-hover {display: block; position: relative;}
.anchor-hover img { position: relative; }

.anchor-hover .details { opacity: 0; position:absolute; top: 0px; left:0px; width: 200px; height:200px; margin: 0; padding-top: 0px; padding-left:0px; font-size: 1.2em; line-height: 0.1em; color:#8c8a7d; background: rgba(255,255,255,0.85); overflow: hidden; transition: opacity 0.25s linear 0s; -webkit-
transition: opacity 0.25s linear 0s; -moz-transition: opacity 0.25s linear 0s; -o-transition: opacity 0.25s linear 0s;
}

.anchor-hover .details h2 { font-weight: bold; font-size: 1.1em; color: #3c527d; margin-bottom: 8px; text-decoration:none;
}

.anchor-hover .details p.desc { font-family:'proxima-nova';
    font-weight:500;
    font-size:14px;
    color:#8c8a7d;
    text-decoration:none;
}

.anchor-hover .details span.pubdate { position: absolute; bottom: 10px; left:10px; font-weight: 500; font-family: 'proxima-nova', Tahoma, sans-serif; }
.anchor-hover .details span.viewlink { position:absolute; bottom: 10px; right: 10px; font-weight:bold; color: #3c527d; font-size: 1.3em;}

.anchor-hover:hover .details {opacity: 1;}
.boxxy:hover {box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(71, 123, 164, 0.7); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0, 0, 10px rgba(71, 123, 164, 0.7); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0, 0, 10px rgba(71, 123, 164, 0.7);}

#boxxy-list a {text-decoration: none;}

Do you see something I'm not? Thank you for your help.

Answer 1

Check that overflow: hidden; is not applied to the element. If it is you can set overflow: initial;

Answer 2

word-wrap:break-word;

That should do the trick. Put this inside of your .boxxy class. This will wrap the words within the box so that they do not overflow out of the box and hide.

Is this what you are looking for?

Answer 3

In Firefox or Chrome, open your website and right click, select "Inspect Element..." while hovering over or around your .boxxy and child elements. You should see some CSS styles. See if width or any other values have been crossed out. My top guess:

• .desc has some overriding div element from a different location that sets widths, or padding, or margins.

This is an important way to debug CSS, so if you have not already done it, I would strongly advise it. If you don't want to do that, please remove all CSS references except for this one and work out from there, line by line, in your CSS code, or, if you'd like more help, share all of your CSS code. Before you get through it all you'll probably see what's wrong though!

Example from Firefox:

Answer 4

Adjust your line-height for .anchor-hover .details in your CSS to 1em.

Please see this fiddle: http://jsfiddle.net/tbfd8/