文字两边对齐
Definition. Suibian Means "whatever".
Origins from Mandarin, chinese.
Will you join me as you said?
No, i changed my mind! suibian!
#suibien #shuibian
#div1{
width:200px;
height:auto;
text-align:justify;
hyphens: auto;
}
两边对齐
dd最后换行
Name:Lea Verou Lea VerouEmail:lea@verou.meLocation:Earth
#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; }
最后换行
文字斑马线(1)
op Definition. Suibian. Means "whatever".
Origins from Mandarin, chinese.
Will you join me as you said? No,
i changed my mind! suibian!
#suibien #shuibian
#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;
}
斑马线
文字斑马线(2)
op Definition. Suibian. Means "whatever".
Origins from Mandarin, chinese.
Will you join me as you said? No, i changed my mind! suibian!
#suibien #shuibian
#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);
}
斑马线
pre： tab -> 空两个字节
<div>
<div></div>
</div> <div>
<div></div>
</div> <script>
var aa = function(){
}
</script>
#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);
}
格式化代码
描边
Definition.
#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;
}
描边
下划线3
CSS
#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;
}
下划线3
文字环绕
circular reasoning works because
.circular {
width: 20em;
height:20em;
}
.circular svg {
display:block;
overflow:visible;
}
.circular path{
fill:none;
}
文字环绕
.
