Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <div class="hyphens">
    <h1>Hyphens</h1>
<h2>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h2>
      <h3>Wir schreiben 2015 und Netzneutralität ist Länderverratssache</h3>
  <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. </p>
    </div>
    <div class="word-break">
      <h1>word-break</h1>
<h2>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h2>
      <h3>Wir schreiben 2015 und Netzneutralität ist Länderverratssache</h3>
  <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. </p>
    </div>
<div class="overflow-wrap">   
  <h1>overflow-wrap</h1><h2>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h2>
  <h3>Wir schreiben 2015 und Netzneutralität ist Länderverratssache</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. </p></div>
    <div class="solution-one">   
  <h1>Hyphens and word-break</h1><h2>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h2>
      <h3>Wir schreiben 2015 und Netzneutralität ist Länderverratssache</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. </p></div>
    <div class="solution-two">   
  <h1>Hyphens and overflow-wrap</h1><h2>Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</h2>
      <h3>Wir schreiben 2015 und Netzneutralität ist Länderverratssache</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. </p></div>
  </div>
    </body>
</html>
 
.wrapper {
  width: 260px;
  margin: 20px auto;
  background: black;
  color: #fff;
  padding: 20px;
}
.hyphens {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.word-break {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}
.overflow-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.solution-one {
  -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.solution-two {
   word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
justmarkuppro
0viewers