html+css美图卡片小练习(未用浮动)

要求的样式：

html部分

 <main>
        <div class="main">
            <div class="img">
                <img src="./QQ截图20230302181804.png" alt="">
            </div>
            <div>
                <div class="title">
                    <h3>
                        2022中国国际服贸会开幕 美图公司亮相展现厦门服贸企得同尝将生天，极娘。
                    </h3>
                </div>
                <div class="essay">
                    <p>
                        8月31日晚，2022年中国国际服务贸易交易会在北京开幕。今年服贸会共有65个国家和国际组织参会、超过1400家企业线下参展，聚焦服务贸易热点趋势，重点设置电信、计算机和信息服务，金融服务等9个专题，分别在北京国家会议中心和首钢园区
                        所登变在承甲作败不心也，郭的老梵逃年始不可陀贼郭无皇，啦历问韩害的司，年况中答着婵迷事一遗，可的却谭朗见会价治狂六自间韩，得事色皮拿冈作陀娟，战刑乐不一教逃李人定匹感车整上天，到于爱手天秦承尘，国的。
                    </p>
                </div>
                <div>
                    <span class="time">
                        2022-08-31
                    </span>
                    <a href="#" class="details">
                        <span>
                            查看详情&rarr;
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </main>

css部分：

 * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .main {
            width: 500px;
            margin: 50px auto;
            border:#787878 solid 1px;
        }

        .img img {
            width: 500px;
        }

        .title h3 {
            width: 460px;
            margin-left: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 单行文本省略 */
            font:400 16px/3 sans-serif;

        }

        .essay p {
            display: -webkit-box;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            /* 多行文本省略 */
            color:#787878;
            font:400 14px/2.5 sans-serif;
            margin-top: 15px;
            margin-left: 15px ;
            margin-right: 15px;
        }
        .time {
            display:inline-block;
            margin:30px 260px 30px 30px;
            color:#787878
        }
        .details span{
            color:#787878;
        }
        .details:hover span{
            color:#B6B6B6;
        }

实现的样式：

总结

这个练习重点在于单行文本的省略和多行文本的省略：

单行文本的省略：

width: 460px;

margin-left: 15px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行文本的省略：

display: -webkit-box;

overflow: hidden;

word-break: break-all;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

---

希望以上内容对你有帮助！