Vuoi che il testo sia racchiuso tra div-html, word-wrap, css

Nel mio codice qui sotto, ho 3 immagini con una didascaliasotto alcune immagini. Non voglio che la larghezza del testo superi la larghezza dell'immagine.Nota: la larghezza delle immagini può variare Non è una larghezza fissa Se il testo supera la larghezza dell'immagine, il testo deve essere avvolto Un altro problema che ho nel codice qui sotto è che la seconda e la terza immagine mostrano alcune imbottiture nella parte inferiore dell'immagine.Il bordo attorno a questa immagine non dovrebbe avere padding.

http://jsfiddle.net/AndroidDev/Asu7V/15/

<div style="width:300px; overflow-x: auto;white-space: nowrap;">
<div style="vertical-align:top">
<div class="x">
<img src="/images/http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
<div style="white-space:wrap">Grumpy Cat is a famous cat</div>
</div>
<div class="x">
<img src="/images/http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
<img src="/images/http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
</div>
<div class="x">
<img src="/images/http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
</div>

risposte:

1 per risposta № 1

Dal momento che non ne assegni nessuno width alla tua div elemento in modo da assegnarlo e quindi utilizzare white-space: normal;

<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>

dimostrazione

Ancora una volta, vorrei avvisarti che evitare l'uso di stili in linea ..

Inoltre, quando aggiusti il ​​wrapper div che contiene solo immagini, è meglio usarlo max-width e max-height per il tuo img così farà in modo che vince "t overflow.

Inoltre, ultimo ma non meno importante, considera l'utilizzo di a p elemento invece di div che darà un significato semantico al tuo testo.

---

Stavi usando white-space: wrap; dove wrap non è un valore valido per white-space proprietà, quindi è necessario normal

---

Come hai commentato, vuoi liberarti dello spazio bianco su entrambi i lati, quindi per quello, aggiusta l'elemento wrapper assegnandone alcuni width all'elemento wrapper, e per lo spazio bianco sotto il problema dell'immagine, può essere risolto utilizzando font-size: 0; sull'elemento wrapper e sull'assegnazione di alcuni font-size al testo, o il modo migliore per andare è quello di utilizzare display: block; per il tuo img elemento.

---

0 per risposta № 2

Un modo semplice per farlo sarebbe avvolgere la tua immagine eil testo in un div in modo che quando aumenta la dimensione dell'immagine fornirà anche la stessa area per il testo a scorrere e non andrà oltre l'immagine pure.

---

0 per risposta № 3

Manca la larghezza dal tuo css, ecco una demo: DEMO

HTML

<div style=""><span class="text">Grumpy Cat is a famous cat</span>

CSS

 .text {
vertical-align:top;
display:inline-block;
white-space:normal;
word-wrap: break-word;
width:70%;
max-width:70%;
}
.x {
border:1px solid #000000;
display:inline-block;
white-space:nowrap;
position:relative;
width:42%;
vertical-align: top;
}

---