span che simuli una table-cell

[stardom]

Nel replicare il mio vecchio sito, ho creato uno span {display:inline-block;width:30%;word-wrap:break-word!important;} per separare il titolo dal contenuto di certi dati in modo che si allineino tutti come fossero in una table-cell.

Ma il testo del contenuto mi va a capo. Non riesco a trovare la soluzione per mantenerlo entro la sua cell.

La difficoltà nasce anche dal fatto che non siamo all'interno di un <ul><li> ma un {if statement}

$result .= '<p  class="address"><span><b>'.esc_html__('address','mytheme').'</b></span>  ' . $address . '</p>'; 

Ringrazio in anticipo...

[KillerWorm]

Hai racchiuso il titolo dentro lo <span> ma il "testo del contenuto" resta nel normale flusso dei contenuti all'interno dell'intero <p>; andando a capo è normalmente libero di distribuirsi sotto quello span del titolo non avendo nessun impedimento in quello spazio.

Giusto un'idea: potresti racchiudere il testo dentro un ulteriore <span>, oltre al titolo, così che entrambi restino dentro i limiti del loro stesso span; proprio come fossero due distinti <td>, uno di fianco all'altro. Chiaramente dovrai applicargli dell'opportuno CSS per fissare le larghezze in modo adeguato.

[stardom]

Un ulteriore span, senza css, mi porta il titolo al bottom della ipotetica "cell".... non saprei quale proprietà aggiungere

UPDATE: mmh, forse è suffciente un vertical-align:top senza toccare il width

[stardom]

potresti racchiudere il testo dentro un ulteriore <span>, oltre al titolo, così che entrambi restino dentro i limiti del loro stesso span; proprio come fossero due distinti <td>, uno di fianco all'altro. Chiaramente dovrai applicargli dell'opportuno CSS per fissare le larghezze in modo adeguato.

$result .= '<p class="address"><span><b>'.esc_html__('Address','mytheme').'</b></span><span class="myclass"> ' . esc_html( $address );} $result .= '</span></p>'; 

C'è qualcosa che non mi torna.
1) innanzitutto preferirei un unico span, invece di crearne due (il secondo con myclass).
2) al primo span dò width 30% ed al secondo 70%, ma il secondo non sta nel suo spazio se non per max 60%
3) se non metto !important nel secondo width, non lo prende (l'inspector legge solo il valore del primo span)
4) word-break:break-word; per il secondo span non si applica se il width è sopra 59%

Non c'è un metodo alternativo? La pagina di esempio è questa (sidebar "Dati aziendali").

[KillerWorm]

1) innanzitutto preferirei un unico span, invece di crearne due (il secondo con myclass).

Sì, se hai certezza che il titolo resti sempre e solo su una riga (all'intero di quel 30% del <p>), potrebbe andar bene anche solo quello che racchiude il testo, così che giusto il testo sia limitato quando va a capo.

2) al primo span dò width 30% ed al secondo 70%, ma il secondo non sta nel suo spazio se non per max 60%

Forse c'è da considerare anche il resto che occupa dello spazio dentro quel <p>. Quelle icone sulla sinistra, dove stanno? Non stanno sempre dentro il <p>? Hai valutato quale sia il loro ingombro?

3) se non metto !important nel secondo width, non lo prende (l'inspector legge solo il valore del primo span)

Bisogna capire come hai impostato le regole CSS. Quali sono i selettori usati, che specificità hanno e qual è l'ordine in cui sono lette le regole.

Tutte queste cose influiscono proprio sull'applicazione delle varie proprietà.

Ad esempio, nel vedo alcuna classe applicata per il primo span; come hai costruito il selettore per identificarlo?

Mi viene da pensare che tu stia usando un selettore "nome tag", ad esempio ".address span" dove "span" è appunto un selettore "nome tag".

Se fosse così è ovvio che la regola viene applicata ad entrambe gli span dentro ".address " e quindi dovrai forzare l'applicazione delle specifiche proprietà per riuscire a sovrascriverle.

In questo caso sarebbe forse utile applicare una classe anche sul primo span, così da poterlo selezionare in modo più specifico e senza bisogno di usare !important.

4) word-break:break-word; per il secondo span non si applica se il width è sopra 59%

Occhio, il valore "break-word" per tale proprietà risulta essere deprecato.
Vedi qui: CSS: The value “break-word” is deprecated

Si potrebbe intervenire in diverso modo ma non è chiaro cosa intendi ottenere. Puoi chiarire?

Non c'è un metodo alternativo?

Come di consueto, soluzioni possono essercene a centinaia, ma forse basta solo applicarne una nel modo corretto


PS:
Credimi, dal primo post avrei già potuto fornire una soluzione bella e pronta ma ho preferito che tu valutassi meglio le varie problematiche del caso per poi arrivare a capire, da te stesso, come meglio intervenire... altrimenti che gusto ci sarebbe

[stardom]

mumble mumble
1) in alcuni casi il testo potrebbe non rimanere su una riga... per esempio, "volume affari" in alcuni casi è "movimentazione voli annuale", quindi più lungo, ma se sta nella sua "cella" non vedo che fastidio darebbe al testo a destra.
2) le icone potrebbero prendere spazio, ma è anche vero che non stanno dentro il <p>, sono generate altrove

.contact-info-sidebar .custom-info>p:before {color:#313131;content:"\f0ac";font-family:"FontAwesome";font-size:16px;padding-right:15px;padding-left:2px;}

3) le regole sono le seguenti (perchè, l'ordine influisce?)

.contact-info-sidebar p span {display:inline-block;width:30%;word-break:break-word;vertical-align:top;} /*span titolo*/
.contactinfodata {display:inline-block;width:55%!important;word-break:break-word;} /*span contenuto*/

Quindi non utilizzo un selettore "nome tag" (non saprei come utilizzarlo)
4) voglio ottenere che i titoli stiano al loro posto a sinistra/top ed il contenuto a destra/top ma se questo va a capo non deve andarsene sotto il titolo (appunto, come se fossero delle celle). Ho anche notato che testi lunghi (come quelli del campo sitoweb>link) non rispettano la loro posizione, e per questo sto usando word-break (anche se dovrò usare una proprietà non deprecata)

Dove sbaglio?

PS. nel mio vecchio sito era molto semplice, il titolo come <strong> e il contenuto con

position: relative; top: 5px; word-wrap: break-word !important;

[KillerWorm]

1) in alcuni casi il testo potrebbe non rimanere su una riga
[...]
ma se sta nella sua "cella"

Ecco, appunto, la sua "cella" da cosa è composta?
L'oggetto della discussione non è forse "span che simuli una table-cell"?

Se il tutto deve comportarsi come una tabella (con le sue celle), è chiaro che le celle vanno definite in modo preciso e inequivocabile, proprio come per i tradizionali <td> di una <table>.

Per capire opportunamente la questione bisogna comunque valutare il comportamento dei vari elementi in gioco; è necessario avere ben chiara la differenza di comportamento tra elementi a livello "inline" e quelli a livello "block" o "inline-block".

Ci vorrebbe un wikipedia per chiarire bene questi concetti e non è questa la sede opportuna. Ti invito eventualmente a consultare le opportune documentazioni e guide. Tra i link utili CSS trovi un po' di materiale che può essere utile, appunto, a chiarire tali concetti.

Giusto a grandi linee, il normale testo è di per sé "inline", cioè ha un comportamento simile ad un liquido, per cui sta limitatamente dentro il proprio contenitore ma può comunque "scorrere" attorno ad altri elementi che si trovano dentro lo stesso contenitore.

Il testo lasciato libero, dentro quel tuo <p>, segue il normale flusso del testo che lo porta a "scorrere" attorno agli altri eventuali elementi posti nel flusso del testo.

Se gli togli lo <span> (che lo avrebbe tenuto delimitato) come pensi che si comporterebbe?
Quali sarebbero i limiti entro cui deve stare quella parte di testo (il titolo)?

Se non gli dai in qualche modo dei limiti, non hai certezza che questo resti incolonnato entro quei limiti.
Ad esempio, se il titolo si dovesse portare su due righe e il testo del contenuto su un'unica riga, cosa succederebbe?
Probabilmente il titolo, non avendo dei limiti, "scorrerebbe" sotto lo <span> del testo (che è impostato come inline-block).

Forse puoi usare quel <b>, come "cella" per il titolo, ma ciò non toglie che andrebbe sempre applicato del css per definirne opportunamente i suoi limiti.

Spero di aver chiaro questo punto. Poi vedi tu come preferisci impostare la cosa.

2) le icone potrebbero prendere spazio, ma è anche vero che non stanno dentro il <p>, sono generate altrove

Sbagli.
Anche qui ci vorrebbe un wikipedia per chiarire il discorso ma riassumo in poche parole: sono pseudo-elementi, generati dentro quei <p>. Nel CSS trovi il selettore ::before applicato per ciascuno di quei <p> per definire la relativa icona.
Ad esempio per il primo <p> trovi:

.contact-info-sidebar .address::before {
    content: "\f041";
}

3) le regole sono le seguenti (perchè, l'ordine influisce?)

Altro wikipedia.
L'ordine in cui sono scritte (e quindi lette) le regole CSS è la peculiarità dei CSS; per questo si chiamano "Cascading Style Sheets" (fogli di stile a cascata). Questo può influire assieme ad altri fattori come la "specificità", per il discorso dell'override (la prevalenza delle regole rispetto ad altre).

Vedi concetti come override e specificità.
Al capitolo "2. Come funzionano i CSS" dei link utili CSS puoi trovare vari riferimenti a riguardo sotto la voce "Specificità, ereditarietà, override".

Quindi non utilizzo un selettore "nome tag" (non saprei come utilizzarlo)

Questo selettore ".contact-info-sidebar p span" seleziona tutti gli elementi <span> dentro quel <p>, non solo il titolo (il tuo commento in quella riga è impreciso); per questo motivo le regole sono applicate ad entrambi gli span.

Mentre questo ".contactinfodata" seleziona chiaramente lo span con questa specifica classe (cioè solo quello col testo, e non il titolo) ma ti è stato necessario applicare !important per width perché su questo span era già stata applicata la relativa proprietà attraverso la precedente regola, appunto, che ha priorità rispetto a questa (leggasi "specificità").

Chiaramente puoi applicare dei selettori più specifici per identificare meglio tali elementi, ma la cosa si può risolvere in vari modi, è inutile che ti dica "applica una classe anche al primo span" o "usa il selettore :nth-child()" o "usa flex-box senza bisogno di specificare delle classi" o "usa CSS Grid" o altri cento modi per risolvere, se poi non hai chiaro come la cosa funzioni e resti a ribattere sulle tue idee e convinzioni.

4) voglio ottenere che i titoli stiano al loro posto
...

Credimi, ho capito ciò che vuoi ottenere e avevo già valutato le varie problematiche a seconda delle possibili soluzioni che si possono adottare ma a me preme più far capire come arrivare alla soluzione.

Da quel poco che ho potuto conoscerti qui sul forum, so che sei una persona intelligente ma anche un po' caparbia, per cui non ti darò un codice copia/incolla senza prima averti fatto ragionare su come poter raggiungere un risultato soddisfacente.

Se poi qualche altro utente vuole contribuire fornendoti delle soluzioni già pronte, è chiaramente benvenuto

testi lunghi (come quelli del campo sitoweb>link) non rispettano la loro posizione

Chiarisci "non rispettano la loro posizione". Io vedo che il titolo "sitoweb" è leggermente spostato a destra rispetto agli altri, ma questo è dovuto al fatto che l'icona (generata col ::before dentro quel <p>) è leggermente più larga rispetto alle altre, e che tale elemento, non avendo una larghezza fissata, va ad occupare il suo dovuto spazio all'interno del flusso del testo, portando quindi leggermente più a destra il titolo e il resto el testo.

Forse può essere buono fissare delle dimensioni uguali per tutte le icone. Tu che dici?

PS. nel mio vecchio sito era molto semplice

Usa quel sistema allora. Chi te lo impedisce?

Prova però a cambiare il titolo "volume affari" con quello più lungo "movimentazione voli annuale" (come tu stesso mi hai accennato) e vedi che succede ... io vedo dei testi che si sovrappongono.

Magari era anche semplice ma non proprio ottimale. Tu che pensi?


Fai sapere se sono riuscito a chiarire qualche dubbio e come eventualmente pensi si possa proseguire.

HINT: io andrei di flex-box


PS: perdona la lungaggine

[stardom]

Grazie per il tempo dedicato e per i suggerimenti (e per essere un moderatore DOC, attento ai propri "polli").

Ti confesso che ogni volta che vado a leggere i tutorial CSS li trovo molto contraddittori, e poi all'atto pratico le regole non si comportano come nei "disegnini" dei tutorial stessi (un esempio è proprio block e derivati). Quindi i concetti non mi entrano in testa, perchè son dipendenti da molti fattori laddove mi viene da credere che le regole CSS siano dei dogmi indiscutibili.

Dunque per questo problema sto giocando con block, overflow, ellipsis, et simili cose che contengano il testo entro certi limiti. Anche le icone, per assurdo, se fossero tutte di uguale font-size risulterebbero molto diverse fra loro (quindi hanni quei 4-5px di differenza per coerenza). Ma, ripeto, per (mia) logica se ho un blocco e gli flotto il prossimo blocco alla sua destra, perchè i testi non rimangono nelle rispettive celle? Nella mia testa position:relative significa "comincia l'elemento in relazione ad un altro elemento"... e allora perchè non sarebbe applicabile a questo span? Per (mia) logica io scriverei:
.contact-info-sidebar p span {display:inline-block;position_relative;width:30%;word-wrap:break-word;vertical-align:top;}
che per me significa: "in relazione al punto zero, crea una cella di una certa larghezza, ed all'interno di essa manda a capo il testo rispettando le parole".
Secondo questa logica poi sarebbe suffciente un secondo span:
{display:inline-block;position:relative;width:70%;word-wrap:break-word;vertical-align:top;)
che significa "accoda un altro blocco al primo, ma largo 70%".
Il testo sarebbe vincolato alla larghezza del blocco e non andrebbe a farsi gli affari suoi col blocco precedente/successivo.
Ma voglio utilizzare un solo span.

PS. non saprei utilizzare Flex, Grid (non li conosco, al di là della caparbietà... ma so che con poche righe sostituiscono la prolissità del CSS), e non credo sia ipotizzabile mescolarli con un tema già scritto... farei solo danni (no?)

[KillerWorm]

Quindi i concetti non mi entrano in testa, perchè son dipendenti da molti fattori laddove mi viene da credere che le regole CSS siano dei dogmi indiscutibili.

capisco perfettamente la difficoltà ma il mio invito resta comunque quello di documentarsi per quanto possibile.

Apro una parentesi...

Se io conosco certi concetti, e gran parte delle magagne che si nascondono dietro questi, è perché ne ho visto e rivisto in tutte le salse nei miei ~20 anni di esperienza e di certo, sia chiaro, non è mia pretesa che si imparino (soprattutto per chi non è del mestiere) certe nozioni attraverso qualche discussione sul forum o leggendo sporadicamente qualche informazione qua e là.

Spesso io stesso mi stupisco ancora oggi di certi risultati inaspettati che non quadrano secondo la mia logica e in base a ciò che posso conoscere a riguardo. Ma anche io sono un po' testardo, per cui cerco di approfondire, verificando la documentazione e passando in rassegna le varie informazioni reperibili a riguardo, finché non trovo l'arcano... e lì, spesso e volentieri, scopro che le mie "convinzioni" non erano poi così stabili. Questo mi permette di assimilare man mano quelle nozioni che possono tornarmi utili anche in altri casi simili.

Questo per dire che se hai interesse a capire come far funzionare tale cosa, è necessario apprendere quel minimo di informazioni utili a conoscere il terreno su cui vuoi costruire. Non dico che bisogna essere esperti ma quantomeno imparare, e avere chiari, quei concetti di base necessari a portare avanti lo sviluppo in maniera consapevole; diversamente (e inutile dirlo) si va avanti sempre a tentoni e brancolando nel buio col rischio di non raggiungere mai l'obiettivo voluto o di arrivare ad una soluzione inconsistente.

Chiudo la parentesi.

Anche le icone, per assurdo, se fossero tutte di uguale font-size risulterebbero molto diverse fra loro

Questo è chiaro ma forse non mi sono fatto capire bene quando ho accennato al fatto di "fissare delle dimensioni uguali" per le icone.

Non ho parlato di "font-size", che puoi lasciare comunque così com'è per mantenere inalterata la grafica delle icone, ma di impostare delle dimensioni (altezza e larghezza) per quegli pseudo-elementi che fanno da involucro alle icone, in modo da delimitarne il loro stesso ingombro.

Questo ti permette di avere dei "limiti fissi" per delimitare la posizione stessa del resto degli elementi che seguono tali icone (quindi il titolo e la descrizione).

Ma, ripeto, per (mia) logica se ho un blocco e gli flotto il prossimo blocco alla sua destra, perchè i testi non rimangono nelle rispettive celle?

Perché nello specifico non si tratta di vere e proprie celle di una tabella. Non puoi quindi aspettarti che tali elementi si comportino esattamente come delle celle, a meno di non impostare opportunamente il css necessario.

Molti altri fattori possono influire sul loro comportamento in base alla loro natura originale, per cui è necessario valutare opportunamente quali proprietà applicare per ottenere ciò che ti serve.

Nella mia testa position:relative significa "comincia l'elemento in relazione ad un altro elemento"

Nella mia testa direi "leggi o rileggi adeguatamente la documentazione a riguardo per capire esattamente come funziona la cosa".
Alla fine scoprirei magari che questa proprietà non mi serve in tale situazione

non saprei utilizzare Flex

Si può sempre imparare

e non credo sia ipotizzabile mescolarli con un tema già scritto... farei solo danni (no?)

Se usato con giusta causa non vedo dove sta il problema.

Ora, se me lo chiedi, posso darti una soluzione usando flexbox ma chiaramente ti invito a mettere da parte tutte le tue convinzioni e, se hai interesse, a consultare la documentazione a riguardo, per capire come funziona la cosa

[stardom]

Con tutta la buona volont�, Killer, devo lavorare e non ho molto tempo per studiare Flex, ma cercher� di carpire gli altri punti che suggerisci. Diciamo che per ora va bene come ho fatto (uno span generico ed uno con classe)... non sar� una soluzione perfetta ma mi risolve il problema. Poi ci torno su...