CSS中的自动,软连接 [英] Automatic, soft hyphenation in CSS

查看:120
本文介绍了CSS中的自动,软连接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

去年12月,CSS3

解决方案

 <!DOCTYPE html> 
< html lang =nb>
< head>
< meta charset =utf-8/>
< meta http-equiv =content-languagecontent =no/>
< title>连字符测试< / title>
< style>
html,body {height:100%}
.uc {
font-family:Code2000,TITUS Cyber​​bit Basic,Doulos SIL,
Chrysanthi Unicode, Bitstream Cyber​​bit,
Bitstream Cyber​​Base,Thryomanes,Gentium,GentiumAlt,
Lucida Grande,Arial Unicode MS,Microsoft Sans Serif,
Lucida Sans Unicode ;
font-family / ** /:inherit; / *重置每个人的字体,但IE6 * /
font-size:100%;
}
body {
}

div.main {-moz-column-count:6;
-webkit-column-count:6;
列数:6;

}


部分,文章{
保证金:0 0;
大纲:1px橙色固体;
}

h2,p {
margin:0;
text-align:justify;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
连字符:auto;
/ * word-break:break-all; * /
}
< / style>
< / head>
< body class =uc>
< script> document.write(document.documentElement.getAttribute('lang'));< / script>
< div class =main>
<节>
< h2>无< / h2>
< p> Det er god tilgangpåkompetanse mange steder i Norge。 Statlige virksomheterMåbenytte denne kompetansen bedre,OG捐助正在直到åbygge sterkekompetansemiljøer我和乐landet,锡埃尔kommunal- OG moderniseringsminister扬撕毁塞纳OM regjeringens计划lokalisering AV statlige arbeidsplasser< / p为H.
< h2> no< / h2>
< p lang =no> Det er god tilgangpåkompetanse mange steder i Norge。 Statlige virksomheterMåbenytte denne kompetansen bedre,OG捐助正在直到åbygge sterkekompetansemiljøer我和乐landet,锡埃尔kommunal- OG moderniseringsminister扬撕毁塞纳OM regjeringens计划lokalisering AV statlige arbeidsplasser< / p为H.
< h2> nn< / h2>
< p lang =nn> Det er god tilgangpåkompetanse mange steder i Norge。 Statlige virksomheterMåbenytte denne kompetansen bedre,OG捐助正在直到åbygge sterkekompetansemiljøer我和乐landet,锡埃尔kommunal- OG moderniseringsminister扬撕毁塞纳OM regjeringens计划lokalisering AV statlige arbeidsplasser< / p为H.
< h2> nb< / h2>
< p lang =nb> Det er god tilgangpåkompetanse mange steder i Norge。 Statlige virksomheterMåbenytte denne kompetansen bedre,OG捐助正在直到åbygge sterkekompetansemiljøer我和乐landet,锡埃尔kommunal- OG moderniseringsminister扬撕毁塞纳OM regjeringens计划lokalisering AV statlige arbeidsplasser< / p为H.
将! - < p为H. - Denne PLANEN VIL Skape很好奈muligheter用于民间OG lokalsamfunn,OG捐助正在直到vekst OG utvikling BADE我拜尔OG distrikter,锡埃尔塞纳< / p为H.
< p> Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen«Bærekraftigebyer og sterke distrikter»。< / p>
< p> - Sålangt i denne regjeringsperiod er det vedtattåflytte ut eller etablere om 630 statlige arbeidsplasser utenfor Oslo。 Planen beskriverogsåhvordan regjeringennåskal utrede ytterligere etablering av statlig virksomhet i hele landet,sier Sanner。< / p>
将p为H. - NAR statlige virksomheter plasseres我和乐landet,根flere FA spennende karrieremuligheter我DETlokalmiljøet德kommer FRA,OG dermed kunne flytte hjem埃特fullførthøyereutdanning。 Med ny teknologi kan statlige virksomheter drives flere steder and og samtidigværetilgjengeligebådefor publikum and samarbeidspartnere,sier Sanner。< / p>

De nye oppgavene som kan bli flyttet,finnes innen blant annet kunnskapsforvaltning,landbruksforvaltning orog administration tjenester。 Blant disse virksomhetene erPolitihøgskolen,Språkrådet,Fredskorpset,Likestillings- og diskrimineringsnemnda og deler av NVE。< / p>
< p> - 在beskjeder som dette er krevende的Jegforstårgodt处理de viratom i disse virksomhetene。 Nåskal vi sikre gode prosesser videre,der de ansatte skal blihørt。 Vi haroogsågode ordninger for ansatte i omstilling,sier Sanner。< / p> - >
< / section>
< section title =English>
< h2>无< / h2>
< p>设计师试图创造功能性作品时,我们经常需要尽可能地完成我们的设计。< / p>
< h2> en< / h2>
< p lang =en>随着设计师尝试创造功能性作品,我们经常需要尽可能地完成我们的设计。< / p>
< h2> en-au< / h2>
< p lang =en-au>随着设计师尝试创建功能性作品,我们经常需要尽可能地完成我们的设计。< / p>
< h2> en-gb< / h2>
< p lang =en-gb>随着设计人员尝试创建功能性作品,我们经常需要尽可能地完成设计。< / p>
< / section>
< section title =German>
< h2>无< / h2>
< p> Als Designer versuchen,Erstellen von funktionalen arbeiten,sind oft wir verpflichtet,unsereEntwürfeals fertige wiemöglichaussehen zu machen。< / p>
< h2> de< / h2>
< p> Als Designer versuchen,Erstellen von funktionalen arbeiten,sind oft wir verpflichtet,unsereEntwürfeals fertige wiemöglichaussehen zu machen。< / p>
< / section>
< / div>
< / body>
< / html>


In December last year, CSS3 Hyphens support supposedly came to Chrome. Also, IE should be on board, in addition to other major browsers.

Update: Upon receiving the answers below, I understand that I misinterpreted the footnote on caniuse.com.
It says: 'Only supports the auto value on Mac for now'.
I interpreted this as meaning 'On the Mac, only the auto value is supported for now'.
But what is really meant is 'The Mac is the only platform where the auto value is supported for now'. /Update.

However, I'm having trouble implementing for either Chrome or IE. I have read several older (and now somewhat outdated) SE posts (1, 2, 3) and made a jsfiddle that unfortunately only yields the intended results in Firefox.

Supposedly, hyphenation should work in IE for my target languages, Norwegian (lang="no") and English (lang="en") without manually adding dictionaries (hyphenate-resource).

Are there modifications that can be made to the fiddle that will make the hyphenation work in IE and/or Chrome without dictionaries? If not, does anyone know a useful hyphenate-resource for Norwegian?

If not we'll have to consider using hypher or hyphenator, but I would prefer avoiding a JavaScript implementation for what I should get natively from the browser.

解决方案

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-language" content="no"/>
    <title>hyphen tests</title>
    <style>
        html,body{height:100%}
        .uc {
        font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
            "Chrysanthi Unicode", "Bitstream Cyberbit",
            "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
            "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
            "Lucida Sans Unicode";
        font-family /**/:inherit; /* resets fonts for everyone but IE6 */
        font-size:100%;
}
        body{
        }

        div.main{-moz-column-count:6;
                 -webkit-column-count:6; 
                 column-count:6;

        }


        section, article {
            margin: 0 0;
            outline: 1px orange solid;
        }

h2,p{
    margin:0;
    text-align:justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /*word-break:break-all;*/
}
    </style>
</head>
<body class="uc">
    <script>document.write(document.documentElement.getAttribute('lang'));</script>
    <div class="main">
        <section>
            <h2>none</h2>
            <p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>no</h2>
            <p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nn</h2>
            <p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nb</h2>
            <p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
            <p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
            <p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
            <p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
            <p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
            <p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
        </section>
        <section title="English">
            <h2>none</h2>
            <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en</h2>
            <p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-au</h2>
            <p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-gb</h2>
            <p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
        </section>
        <section title="German">
            <h2>none</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
            <h2>de</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
        </section>
    </div>
</body>
</html>

这篇关于CSS中的自动,软连接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆