Testo non inserito nel tag p

Question

Ho due div flottati, affiancati, con etichette p all'interno. Il testo all'interno dei tag p non va a capo e solo trabocca il contenitore, come si può vedere nel testo sotto le immagini:

mio HTML si presenta in questo modo:

 <div class="submenu"> 
      <h3>Destinations in Europe</h3> 
      <ul> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
      </ul> 
      <h3>Features</h3> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-one.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl 
       </p> 
      </div> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-two.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl 
       </p> 
      </div>   
     </div> 

mio CSS :

#rb-menu-com li .submenu > div { 
    width:48%; 
    float:left; 
    position: relative; 
} 

#rb-menu-com li .submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; 
} 

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
} 

Qualcuno ha provato questo prima? Non ho !! Mi fa diventare matto!

Answer 1

il ritorno a capo si verifica solo quando c'è una pausa di parola.

Se si dispone di una "parola" lunga quanto quella, non c'è spazio per la sua interruzione.

La soluzione corretta è scrivere contenuto reale e non stringhe di caratteri senza senso. Se stai utilizzando contenuti generati dagli utenti, aggiungi un controllo per parole eccezionalmente lunghe e disabilitalo (oppure taglia una parte di esse per gli URL mantenendo tutto il contenuto in un link).

In alternativa, è possibile utilizzare word-break CSS property per dire al browser di interruzione di riga nel mezzo di parole.

p { word-break: break-all } 

(Nota browser support).

In alternativa, è possibile utilizzare overflow per troncare il testo se non si adatta al contenitore.

Answer 2

aggiungi float: left property all'immagine.

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
    float:left; 
} 

Answer 3

Assegna questo stile al tag <p>.

p { 
    word-break: break-all; 
    white-space: normal; 
} 

Answer 4

Questo perché si dispone di testo continuo, significa singola parola lunga senza spazio. Per rompere aggiungere word-break: break-all;

.submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; word-break: break-all; background:red 
} 

DEMO

Answer 5

Questa non è una risposta alla domanda, ma come ho trovato questa pagina mentre cercavo una risposta ad un problema che avevo, voglio menzionare la soluzione che ho trovato in quanto mi è costato un sacco di tempo. Nella speranza questo sarà utile per gli altri:

Il problema era che il testo in un tag p > non si piegava nel div. Alla fine, ho aperto l'ispettore e ho notato che non c'era nessuna entità di spazio in rottura tra tutte le parole. Il mio editor, vi, mostrava solo spazi vuoti normali (alcuni chr invisibili, non so cosa) ma avevo copiato il testo da un documento PDF. La soluzione era copiare uno spazio vuoto da dentro e sostituirlo con uno spazio vuoto. vale a dire. :% s///g dove il bianco da sostituire è stato copiato dal testo incriminato. Problema risolto.

Answer 6

È possibile utilizzare il wordwrap per rompere le parole o una sequenza continua di caratteri se non si adatta a una riga in un contenitore.

word-wrap: break-word; 

Ciò manterrà linee di rottura in adeguati punti di interruzione a meno che una singola stringa di caratteri non si adatta su una linea, in tal caso si romperà.

JSFiddle

Answer 7

Per chiunque ancora lottando, assicurati di controllare e vedere se hai impostato un valore di line-height del carattere in questione: potrebbe essere rilevante il ritorno a capo automatico.

Answer 8

EASY

p{ 
    word-wrap: break-word; 
}