文字两边对齐
<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>
文字环绕
.
