CSS3文字排版

文字两边对齐

<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 -> 空两个字节

    <p-r-e id="div5">
     <c-o-d-e>   <!--  简书会把pre和code转化为html，所以用了连字符，大家拷贝后要去掉连字符  --->
      &lt;div&gt;
       &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;  &lt;div&gt;
       &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;  &lt;script&gt;
       var aa = function(){
       }
      &lt;/script&gt;
     </c-o-d-e>
    </p-r-e>
    <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

    <h-1 id="div18">
      <svg width="2em" height="1.2em">
       <use xlink:href="#css" />
       <text id="css"y="1em">CSS</text>
      </svg>
    </h-1>
    <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>

文字环绕

.