Brūkšneliai - CSS-gudrybės

Anonim

Į hyphensnuosavybės valdymo Daiktavardis iš teksto blokas lygio elementų. Galite užkirsti kelią brūkšniavimui apskritai, leisti arba leisti tik tada, kai yra tam tikrų simbolių.

Atkreipkite dėmesį, kad hyphenskalba yra jautri. Jo sugebėjimas rasti pertraukos galimybes priklauso nuo kalbos, apibrėžtos langpagrindinio elemento atribute. Dar ne visos kalbos palaikomos, o palaikymas priklauso nuo konkrečios naršyklės.

Sintaksė

p ( hyphens: none | manual | auto )

brūkšneliai: nėra

Žodžiai niekada nėra brūkšniuojami pertraukose, net jei žodžio viduje esantys simboliai rodo, kur brūkšnelis galėtų ar turėtų vykti.

brūkšneliai: rankiniai

Žodžiai laužomi tik eilučių pertraukose, kai žodžio viduje yra simbolių, kurie rodo eilučių pertraukimo galimybes. Yra du simboliai, siūlantys eilutės pertraukimo galimybę:

  • U+2010(HYPHEN): „kietasis“ brūkšnelis rodo matomą linijos pertraukimo galimybę. Net jei linija tuo metu tikrai nėra nutraukta, brūkšnys vis tiek pateikiamas. Pažodžiui „-“.
  • U+00AD(SHY): nematomas, „minkštas“ brūkšnys. Šis simbolis nepateikiamas matomai; vietoj to, ji siūlo vietą, kurioje naršyklė prireikus gali nuspręsti nutraukti žodį. HTML galite naudoti -norėdami įterpti minkštą brūkšnį.

brūkšneliai: automatinis

Žodžiai gali būti sulaužomi tinkamuose brūkšnelių taškuose, kuriuos nustato žodžio viduje esantys brūkšniniai ženklai (žr. Aukščiau), arba automatiškai nustatomi kalbai tinkamais brūkšnelių šaltiniais (jei palaiko naršyklė arba pateikia per juos @hyphenation-resource).

Sąlyginiai brūkšneliai, esantys žodyje, turi viršenybę prieš automatinius išteklius, nustatydami žodžio brūkšniavimo taškus.

brūkšneliai: visi

Nebenaudojama, nenaudokite . Tai buvo laikinai išbandyta specifikacijoje.

Demonstracija

Žemiau pateiktoje demonstracijoje yra aibė pastraipų, o viskas padaryta taip, hyphens: auto;kad pademonstruotų brūkšnelio sąvoką. langAtributas yra nustatytas enant tėvų elemento.

Patikrinkite šį rašiklį!

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
88 6 * 10 * 12 * 5,1 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 4,2–4,3 *

Reikia „Safari 5+“ -webkit-, „Firefox 6+“ -moz-, „IE 10+“ -ms-, „iOS 4.2+“ -webkit-.

„Chrome <55“ ir „Android“ naršyklė iš tikrųjų palaiko -webkit-hyphens: none, kuri yra numatytoji vertė, bet nė viena iš kitų reikšmių.

„Firefox“ ir „Internet Explorer“ automatinis brūkšniavimas veikia tik kai kuriomis kalbomis (apibrėžtomis langatributu). Išsamų palaikomų kalbų sąrašą rasite šioje pastaboje.

Jei rašote internetinį dokumentą, kuriam tikrai reikia brūkšnelio, galite naudoti „Hyphenator.js“, kuri yra biblioteka, pagrįsta plačiu žodynu, kuris į jūsų turinį automatiškai įves minkštus brūkšnelius ir nulinio pločio tarpus.

Jei neturite „JavaScript“, turėsite pasikliauti abiem hyphensir word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )