HTMLCSS前端效果汇总

来源：互联网发布：男士去黑眼圈知乎编辑：程序博客网时间：2024/05/29 03:31

1.两端对齐

<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>

2.文字超长显示省略号

<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>

3.单行居中折行居左

<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>

4.全选/全不选

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

阅读全文

0 0