HTMLCSS前端效果汇总

<style>
.t { width: 140px; border-bottom: 1px solid #CCC; text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; }
</style>
<div class="t">说的</div>
<div class="t">你要写</div>
<div class="t">你要写的</div>
<div class="t">你要写的东</div>

<style>
.article { border:1px solid;}
.article div { width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
<div class="article">
<div>阿斯顿发斯蒂芬</div>
<div>阿斯顿发斯蒂</div>
<div>asdfasdfaddsfasdfadf</div>
</div>

<style type="text/css">
    div { width: 200px; border-bottom: 1px solid; text-align: center; }
    span { display: inline-block; text-align: left; }
</style>
<div><span>阿斯顿发送到发</span></div>
<div><span>阿斯顿发送到发送到发阿斯顿发送到发送到</span></div>

$(function () {
$('#chk_all').click(function () {
$('input[type="checkbox"]').each(function () {
$(this).attr("checked", !!$('#chk_all').attr("checked"));
});
});
});