27 #Text Text

27.1 #Text.align Text align

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.-sf-txt-align-left, -sf-txt-align-right, -sf-txt-align-center

Pellentesque luctus, erat sed elementum aliquam.
Pellentesque luctus, erat sed elementum aliquam.
Pellentesque luctus, erat sed elementum aliquam.
Html 
    <div class="-sf-txt-align-left">Pellentesque luctus, erat sed elementum aliquam.</div>
    <div class="-sf-txt-align-right">Pellentesque luctus, erat sed elementum aliquam.</div>
    <div class="-sf-txt-align-center">Pellentesque luctus, erat sed elementum aliquam.</div>

27.2 #Text.direction Text direction

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-direction-rtl, -sf-direction-ltr

Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.

Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.

Html 
    <p class="-sf-direction-rtl">Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.</p>
    <p class="-sf-direction-ltr">Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.</p>

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-overflow-auto" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>

27.4 #Text.overflow-ellipsis Overflow ellipsis

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-overflow-ellipsis

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-overflow-ellipsis" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>

27.5 #Text.overflow-hidden Overflow hidden

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-overflow-hidden

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-overflow-hidden" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>

27.6 #Text.overflow-multiline-ellipsis Overflow ellipsis on the second line

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-overflow-multiline-ellipsis

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-overflow-multiline-ellipsis" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>

27.7 #Text.transform Text transform

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.-sf-txt-nowrap, -sf-txt-lower-case, -sf-txt-upper-case

Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Pellentesque luctus, erat sed elementum aliquam.
Pellentesque luctus, erat sed elementum aliquam.
Html 
    <div class="-sf-txt-nowrap">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
    <div class="-sf-txt-lower-case">Pellentesque luctus, erat sed elementum aliquam.</div>
    <div class="-sf-txt-upper-case">Pellentesque luctus, erat sed elementum aliquam.</div>
Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Html 
    <div class="-sf-txt-base">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Html 
    <div class="-sf-txt-large">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Html 
    <div class="-sf-txt-small">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>

27.11 #Text.txt-vertical-align-middle Vertical align middle

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.-sf-txt-vertical-align-middle

Pellentesque luctus, erat sed elementum aliquam.
Html 
    <div class="-sf-txt-vertical-align-middle">Pellentesque luctus, erat sed elementum aliquam.</div>

27.12 #Text.utility Text utility classes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Hint, dimmed, success, failure

.-sf-txt-hint, .-sf-txt-dimmed, .-sf-txt-success, .-sf-txt-failure

Hint: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Dimmed: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Success: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Failure: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.
Html 
    <div class="-sf-txt-hint">Hint: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
    <div class="-sf-txt-dimmed">Dimmed: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
    <div class="-sf-txt-success">Success: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
    <div class="-sf-txt-failure">Failure: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-word-break-all" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>

27.14 #Text.word-break-word Word break

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-word-break-word

Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.

Html 
    <p class="-sf-word-break-word" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>