空格：普通内部空格：nowrap

Question

I want to put a list of SPAN with white-space:normal inside a span with white-space:nowrap. when i try the code above in firefox works. when i try in the chrome don't work. how to fix it?

<div style="overflow: auto; width: 100%; white-space: nowrap;" class="well">

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>

            <span style="margin: 10px; position: relative;">
                <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;">
                <a href="/promo-web/promocao/13">
                    <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span>
                </a>


            </span>
...

Answer 1

You are missing some concepts about html & css.

• Separe css from html.
• For containers, use div . Use span just to style inline elements.
• Don't abuse on creating to many DOM elements.

See my solution (instead of div you can use ul & li too). Also, if possible, show the image as a background-image instead creating a img tag and applying absolute positioning.

http://jsfiddle.net/jvHZq/

HTML:

<div class="well">
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
    <div>
        <img data-src="holder.js/150x150" class="img-rounded img-polaroid" />
        <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a>
    </div>
</div>

CSS:

.well {
    overflow: auto;
    width: 100%;
    white-space: nowrap;   
}
.well > div {
    float: left;
    position: relative;
    white-space:normal;
    width: 33%;
}
img {
    width: 150px; height: 150px;   
}
a {
    position: absolute;
    top: 0;
    left: 5px;
}