HTMLCSS前端效果汇总_前端 css效果-优快云博客

本文链接：https://blog.youkuaiyun.com/stringwb/article/details/78109990

本文详细介绍了如何使用CSS实现两端对齐、单行居中折行居左等布局效果，并展示了如何通过JavaScript实现全选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"));
        });
    });
});