文字兩邊對齊

<div id="div1">
Definition. Suibian Means "whatever". 
Origins from Mandarin, chinese. 
Will you join me as you said? 
No, i changed my mind! suibian! 
#suibien #shuibian
</div>
<style>
 #div1{
  width:200px;
  height:auto;
  text-align:justify;
  hyphens: auto;
 }
</style>

兩邊對齊

dd最后換行

<div id="div2">
 <dl>
  <dt>Name:</dt>  <dd>Lea Verou</dd>  <dd>Lea Verou</dd>
  <dt>Email:</dt>  <dd>lea@verou.me</dd>
  <dt>Location:</dt>  <dd>Earth</dd>
 </dl>
</div>
<style>
 #div2 dt, dd { display:inline; }
 #div2 dd {  margin: 0;  font-weight:bold; }
 #div2 dt:not(:first-child)::before {  content:"\A";  white-space:pre; }
 #div2 dd+dd:before {  content:",";  font-weight:normal;  margin-left:-.25em; }
</style>

最后換行

文字斑馬線(1)

<div id="div3">
 op Definition. Suibian. Means "whatever".
 Origins from Mandarin, chinese.
 Will you join me as you said? No,
 i changed my mind! suibian!
 #suibien #shuibian
</div>
<style>
 #div3{
  width:200px;
  padding:0 .5em;
  line-height:1.5;
  background:beige;
  background-image:linear-gradient(rgba(0,0,0,.1) 50%,transparent 0);
  background-size:auto 3.1em;
 }
</style>

斑馬線

文字斑馬線(2)

<div id="div4">
 op Definition. Suibian. Means "whatever".
 Origins from Mandarin, chinese.
 Will you join me as you said? No, i changed my mind! suibian!
 #suibien #shuibian
</div>
<style>
 #div4{
  width:200px;
  padding:.5em;
  line-height:1.5;
  background:beige;
  background-size:auto 3em;
  background-origin:content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%,
  transparent 0);
 }
</style>

斑馬線

pre： tab -> 空兩個字節

    <pre id="div5">
     <code>   <!--  簡書會把pre和code轉化為html，所以用了連字符，大家拷貝后要去掉連字符  --->
      <div>
       <div></div>
      </div>
      <script>
        var aa = function(){
        
        }
      </script>
     </code>
    </pre>
    <style>
        #div5{
          tab-size: 2;
          width: 200px;
          padding: 0 .5em;
          line-height: 1.55;
          background: beige;
          background-size: auto 3.1em;
           background-origin: content-box;
          background-image: linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 0);
        }
    </style>

格式化代碼

描邊

    <span id="div17"> Definition.</span >
    <style>
     #div17{
      width: 400px;
      font: 500%/1 Rockwell,serif;
      background: deeppink;
      color: white;
      text-shadow:
        1px 1px black,-1px -1px black,
        1px -1px black,-1px 1px black;
     }
    </style>

描邊

下劃線3

    <h1 id="div18">
      <svg width="2em" height="1.2em">
       <use xlink:href="#css" />
       <text id="css" y="1em">CSS</text>
      </svg>
    </h1>
    <style>
     #div18{
      width:400px;
      font:500%/1 Rockwell,serif;
      background:deeppink;
      color:white;
     }
     #div18 text {
      fill: currentColor;
     }
     #div18 svg {
     overflow:visible
     }
     #div18 use {
      stroke:black;
      stroke-width:6;
      stroke-linejoin:round;
     }
    </style>

下劃線3

文字環繞

    <div class="circular">
     <svg viewBox="0 0 100 100">
      <path d="M 0,50 a 50,50 0 1,1 0,1 z"  id="circle"/>
      <text>
    <textPath xlink:href="#circle">
       circular reasoning works because
    </textPath>
    </text>
     </svg>
    </div>
    <style>
     .circular {
      width: 20em;
      height:20em;
     }
     .circular svg {
      display:block;
      overflow:visible;
     }
     .circular path{
     fill:none;
     }
    </style>

文字環繞

.