mozilla

Revision 355815 of bTest

  • Revision slug: User:trevorh/bTest
  • Revision title: bTest
  • Revision id: 355815
  • Created:
  • Creator: trevorh
  • Is current revision? No
  • Comment

Revision Content

Example

This CSS snippet creates three classes, one for each possible configuration of the hyphens property.

p.none {
  hyphens: none;
  -moz-hyphens: none;
}
p.manual {
  hyphens: manual;
  -moz-hyphens: manual;
}
p.auto {
  hyphens: auto;
  -moz-hyphens: auto;
}
<strong>Normal</strong>
<p class="none">Lorem ipsum dolor sit amet, cons&shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&shy;citation ullamco laboris nisi ut aliquip ex ea com&shy;modo consequat.</p>
<strong>Manual</strong>
<p class="manual">Lorem ipsum dolor sit amet, cons&shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&shy;citation ullamco laboris nisi ut aliquip ex ea com&shy;modo consequat. Duis aute irure dolor in repre&shy;henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of&shy;ficia deserunt mollit anim id est lab&shy;orum.</p>
<strong>Auto</strong>
<p class="auto">Lorem ipsum dolor sit amet, cons&shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&shy;citation ullamco laboris nisi ut aliquip ex ea com&shy;modo consequat.</p>

Below you can see these configurations in action; resize the window while looking at them to see how hyphenation is handled in your browser.

{{ EmbedLiveSample('Examples', '100%', '300') }}

Revision Source

<h2 id="Examples" name="Examples">Example</h2>
<p>This CSS snippet creates three classes, one for each possible configuration of the <code>hyphens</code> property.</p>
<pre class="brush: css">
p.none {
  hyphens: none;
  -moz-hyphens: none;
}
p.manual {
  hyphens: manual;
  -moz-hyphens: manual;
}
p.auto {
  hyphens: auto;
  -moz-hyphens: auto;
}
</pre>
<pre class="brush: html">
&lt;strong&gt;Normal&lt;/strong&gt;
&lt;p class="none"&gt;Lorem ipsum dolor sit amet, cons&amp;shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&amp;shy;citation ullamco laboris nisi ut aliquip ex ea com&amp;shy;modo consequat.&lt;/p&gt;
&lt;strong&gt;Manual&lt;/strong&gt;
&lt;p class="manual"&gt;Lorem ipsum dolor sit amet, cons&amp;shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&amp;shy;citation ullamco laboris nisi ut aliquip ex ea com&amp;shy;modo consequat. Duis aute irure dolor in repre&amp;shy;henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of&amp;shy;ficia deserunt mollit anim id est lab&amp;shy;orum.&lt;/p&gt;
&lt;strong&gt;Auto&lt;/strong&gt;
&lt;p class="auto"&gt;Lorem ipsum dolor sit amet, cons&amp;shy;ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer&amp;shy;citation ullamco laboris nisi ut aliquip ex ea com&amp;shy;modo consequat.&lt;/p&gt;
</pre>
<p>Below you can see these configurations in action; resize the window while looking at them to see how hyphenation is handled in your browser.</p>
<p>{{ EmbedLiveSample('Examples', '100%', '300') }}</p>
Revert to this revision