CSS - -ms-hyphens

Quiz

Description

CSS -ms-hyphens property used to set the hyphenation behavior for Internet Explorer.

Possible Values

none − Disable hyphenation behaviour for Internet Explorer.
manual − It specify that hyphenation should be performed manually.
auto − It enables automatic the hyphenation behavior for Internet Explorer.
initial − Set the hyphenation behavior for Internet Explorer to its initial value.
inherit − Inherit the hyphenation behavior from its parent element.

Applies to

All the HTML elements.

DOM Syntax

-ms-hyphens: none|manual|auto|initial|inherit;

Example

The folllowing example prevents hyphenation from happening in paragraphs in Internet Explorer −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-none {
      -ms-hyphens: none;
      hyphens: none;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-none">It is a long established contrary to popularised.</p>  
   </div>
</body>
</html>

The following example shows how to use the -ms-hyphens: manual property to manually control the hyphenation behavior of text −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-manual {
      -ms-hyphens: manual;
      hyphens: manual;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-manual">It is a long establ-ished contrary to popul-arised.</p>  
   </div>
</body>
</html>

Here's an example of how to automatically hyphenate words in paragraphs using -ms-hyphens: auto property −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-auto {
      -ms-hyphens: auto;
      hyphens: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-auto">It is a long established contrary to popularised.</p>  
   </div>
</body>
</html>

The following example sets the hyphenation behavior for Internet Explorer to its initial value −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-initial {
      -ms-hyphens: initial;
      hyphens: initial;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-initial">It is a long establ-ished contrary to popular-ised.</p>  
   </div>
</body>
</html>

The following example sets the hyphenation behavior for a paragraph to auto and makes its child elements inherit that behavior −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
      -ms-hyphens: auto;
      hyphens: auto;
   }
   .hyphenated-inherit {
      border: 2px solid #ac3f08;
      background-color: #f05e40;
      -ms-hyphens: inherit;
      hyphens: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      There are many variations of embarrassing of Lorem Ipsum.
      <p class="hyphenated-inherit">It is a long established Contrary to popularised.</p>  
   </div>
</body>
</html>

Print Page