Css per un elemento che consente break-word su divs figlio, ma che può anche espandersi per prendere la larghezza dei suoi figli

Sto provando a determinare se è possibile creare css per un elemento che supporta word-wrap:break-word, ma anche quello si espande per prendere la larghezza dei suoi figli quando la rottura non è possibile.Css per un elemento che consente break-word su divs figlio, ma che può anche espandersi per prendere la larghezza dei suoi figli

<html> 
    <style> 
    .outer { 
    background-color:red; 
    word-wrap:break-word; 
    } 
    </style> 
    <div class="outer"> 
    User generated content: 
    <a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a> 
    <table> 
     <tr> 
     <td>asdfasdfadsffdsasdfasdfsadfafsd</td> 
     <td>asdfasdfadsffdaasdfassdffaafasds</td> 
     </tr> 
    </table> 
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/> 
    </div> 
</html>

Nell'esempio di cui sopra, l'url rompe correttamente, ma l'overflow tavolo e img div esterno rosso se la finestra diventa narraower rispetto alla tabella.

Se faccio la visualizzazione div esterna: inline-block o display: table, la div esterna rossa si espande correttamente per includere il contenuto, ma l'url non si interrompe se la finestra è più stretta dell'URL.

Ho solo bisogno di questo per funzionare in WebKit (su Android), e sto cercando di trovare una soluzione CSS solo (no Javascript), se possibile.

fonte

2011-09-29 nas

Sto cercando una soluzione solo css, o la prova che tale soluzione non è possibile. – nas

Non sono sicuro se questo è ciò che stai cercando, ma in realtà puoi assicurarti che l'interruzione avvenga sempre con il word break della proprietà CSS. Dai un'occhiata a questo [JSFiddle] (http://jsfiddle.net/sp43f/1/) – skyline3000

La loro larghezza massima? – Wex

Guardando le specifiche CSS, è probabile che quello che sto cercando di fare è impossibile, anche se trovo i calcoli delle dimensioni abbastanza difficili da decifrare. Qui ci sono alcuni pezzi importanti:

http://www.w3.org/TR/CSS21/visudet.html

La larghezza del contenuto delle scatole di un elemento non sostituiti in linea è quello della il contenuto visualizzato all'interno di essi

Quindi, se voglio lo sfondo del la mia scatola di contenimento per crescere è la larghezza dei bambini, sembra che ho bisogno di assicurarmi che il layout sia calulato in un contesto di formattazione incorporata:

http://www.w3.org/TR/CSS21/visuren.html#normal-flow

Quando una scatola linea supera la larghezza di un box di riga, viene suddiviso in diverse scatole e queste caselle sono distribuiti attraverso vari linea scatole. Se una casella in linea non può essere divisa (ad esempio, se la casella in linea contiene un singolo carattere o le regole di interruzione di parole specifiche della lingua non consentono un'interruzione all'interno della casella in linea o se la casella in linea è interessata da un valore di spazio bianco di nowrap o pre), quindi la casella in linea supera la casella di riga.

Grande. Speriamo che le regole di rottura includano anche le possibilità di avvolgimento di emergenza.

http://www.w3.org/TR/2010/WD-css3-text-20101005/#word-wrap

Questa proprietà specifica se il programma utente può rompersi all'interno di una parola per evitare overflow quando una stringa altrimenti-indistruttibile è troppo lungo per forma all'interno della scatola di linea.

In realtà non aiuta; diamo un'occhiata allo stato di progetto specifiche più recente:

http://www.w3.org/TR/css3-text/#overflow-wrap

opportunità di pausa non fa parte di ‘overflow-wrap: normale’ linea di rottura non sono considerati nel calcolo dimensioni intrinseche 'min-contenuti.

Questo non è molto chiaro, ma se la dimensione instrinsic 'min-contenuti' ha qualcosa a che fare con gli stessi calcoli utilizzati per la determinazione possibilità di interruzione di riga, mi potrebbe essere fuori di fortuna.

Ho finito per usare solo Javascript per misurare il contenuto e decidere se mostrarlo in blocco o in contesto. Sospiro.

var messages = document.body.getElementsByClassName('mail_uncollapsed'); 

// Show overflowing content by setting element display to inline-block. This 
// prevents break-word from being applied to the element, so we only do this 
// if the element would overflow anyway. 
for (var i = 0; i < messages.length; ++i) { 
    var message = messages[i]; 
    message.style.display = 'block'; 
    var isOverflowing = message.clientWidth < message.scrollWidth; 
    if (isOverflowing) { 
    message.style.display = 'inline-block'; 
    } 
}

fonte

2011-11-03 23:06:45 nas

Ovviamente, la soluzione javascript è semplice, ma nel tuo post hai detto che è inaccettabile. Ad ogni modo, ho aggiornato la mia risposta con un esempio funzionante (anche se è hacker) senza Javascript. – deviousdodo

Nel caso qualcuno si stia chiedendo, 'word-wrap' è stato recentemente rinominato in" overflow-wrap', da cui la discrepanza tra la bozza del 2010 e l'ultima bozza. Entrambi i nomi di proprietà sono alias e condividono lo stesso insieme di valori e regole di rendering. – BoltClock

Assegnazione width: 100%; e utilizzando costringe le cellule td per adattarsi al tavolo e consentirà per la disposizione del testo.

table { 
     width:100%; 
     table-layout:fixed 
     }

fonte

2011-10-22 19:04:30

Ecco il display: http://jsfiddle.net/hgLbh/ @AlexM 'display: inline-block;' non ha limitato la larghezza della tabella. L'ancora traboccante ha causato l'espansione dello sfondo, rendendo visivamente non percepibile la tabella non avvolta. –

Non riesco a controllare il contenuto generato dall'utente, che include la tabella. Ho aggiunto un tag sopra come esempio di un altro elemento che trabocca il genitore. – nas

non so su WebKit mobile, ma questo ha lavorato in Chrome

http://jsfiddle.net/HerrSerker/duDTz/1/

.outer { 
    background-color:red; 
    word-wrap:break-word; 
    overflow:hidden; 
    } 

.outer table { 
    width: 100%; 
    table-layout:fixed 
} 

.outer * { 
    max-width: 100%; 
}

fonte

2011-10-29 14:59:22 HerrSerker

Questa soluzione riduce l'immagine, e qualsiasi altro contenuto che altrimenti traboccherebbe il div, che non è quello che voglio. Grazie per la risposta. – nas

quindi postare una foto del layout desiderato – HerrSerker

Se ho capito quello che ti serve in modo corretto, tutto ciò che serve è overflow: auto impostato su .outer. Ecco un esempio: http://jsfiddle.net/hgLbh/1/ (testato su safari & chrome).

Aggiornamento:

Dopo i suoi commenti relativi scorrimento Ho provato un paio di altre soluzioni e ho trovato qualcosa che soddisfa anche questo. Dirò in anticipo che è sporco, ma se riesci a gestire contenuti assolutamente posizionati e sei disposto a duplicare il markup generato spero che funzionerà (almeno sul mio safari locale lo fa).

La soluzione è quella di duplicare il contenuto e avvolgere il nuovo contenuto in 2 altri div, in modo che il codice HTML sarà simile:

<div class="outer-fixed"> 
    <div class="just-a-helper-wrapper"> 
     ... user generated content 
    </div> 
</div> 
<div class="outer"> 
    ... same user generated content 
</div>

E per il CSS:

.outer, 
.outer-fixed { 
    background-color:red; 
    word-wrap:break-word; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.outer-fixed { 
    position: fixed; 
    right: 0; 
} 
.outer-fixed * { 
    visibility: hidden; 
}

I' mi piacerebbe sottolineare che il just-a-helper-wrapper è necessario solo perché outer-fixed * non seleziona nodi di testo (cioè il contenuto che non è in un altro tag) - per esempio la stringa User generated content: dal tuo esempio sarebbe stata ancora visibile. Se non hai effettivamente quel tipo di contenuto, puoi rimuoverlo.

ecco il link: http://jsfiddle.net/hgLbh/2/

fonte

2011-11-01 00:56:41 deviousdodo

Grazie per il suggerimento. Sfortunatamente, scorrere un div non funziona sul webkit mobile. Potrei usare una libreria js come iScroll per fare il mio scrolling, ma questo non è esattamente quello che voglio, dal momento che preferirei che l'intera pagina scorra anziché solo il div. – nas

Il tuo aggiornamento è una specie di bella idea. Stavo cercando di pensare a un modo per farlo con contenuti duplicati. Non userò questo, ma questo è meritevole della generosità. – nas

Sono d'accordo con Alex (e sono contento che ti abbia riconosciuto per questo), la tua soluzione ha mostrato ingegno. Certo, ci sono problemi (del motore di ricerca) con la duplicazione del contenuto, ma è una soluzione interessante. – ScottS

Mi sembra che draevor ha la risposta, ma ho il sospetto che non si desidera una barra di scorrimento che mostra nel mezzo dello schermo sul div.Se è così, e in base alle proprie limitazioni, si potrebbe provare questo per rendere la div finestra:

CSS

html {height: 100%} 
body {overflow: auto; height: 100%; margin: 0;} 
.outer { 
    word-wrap: break-word; 
    background-color: red; 
    overflow: auto; 
    min-height: 100%; 
}

fonte

2011-11-03 18:26:29 ScottS

Questa soluzione funziona se si sta bene con il div esterno in crescita per prendere l'altezza della finestra e non si sta utilizzando il Webkit mobile. Grazie per la risposta. – nas

Css per un elemento che consente break-word su divs figlio, ma che può anche espandersi per prendere la larghezza dei suoi figli

risposta

Problemi correlati