CSS - -webkit-hyphens

Quiz

Description

CSS -webkit-hyphens property is used to control how text is hyphenated in Webkit browsers, such as Chrome and Safari.

Possible Values

none − Prevents hyphenation in Webkit browsers.
manual − It specify that hyphenation should be performed manually.
auto − It enables automatic hyphenation of text in WebKit-based browsers.
initial − It reset the hyphenation behavior of an element to its initial value for WebKit-based browsers.
inherit − Inherit the -webkit-hyphens property from a parent element.

Applies to

All the HTML elements.

DOM Syntax

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

Example

The following example shows how we can use -webkit-hyphens: none property to prevent hyphenation in Webkit browsers −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-none {
      -webkit-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>

Here is an example of how to use the -webkit-hyphens: manual property −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-manual {
      -webkit-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 is an example shows how to use the -webkit-hyphens: auto property to allow the browser to automatically hyphenate the text −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
   }
   .hyphenated-auto {
      -webkit-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 shows how to use the -webkit-hyphens: initial property 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 {
      -webkit-hyphens: initial;
      hyphens: initial;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-initial">It is a long estab-lished Contrary to popula-rised.</p>  
   </div>
</body>
</html>

The following example shows how to use the -webkit-hyphens: inherit property to inherit the hyphenation behavior from a parent element −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      margin-right: 50px;
      -webkit-hyphens: auto;
      hyphens: auto;
   }
   .hyphenated-inherit {
      border: 2px solid #ac3f08;
      background-color: #f05e40;
      -webkit-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