晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁 CSS 的奇妙世界。今天咱们就用两道高频面试题，开启元气满满的学习之旅，让知识成为你驱散焦虑的阳光。

最近 “CSS 面试技巧”“前端样式优化”“CSS 实战考点” 等词热度居高不下，这些都是面试中常出现的 “拦路虎”。别担心，接下来这两道题，我会用最轻松的方式，带你吃透其中的门道。

第一题：如何用 CSS 实现文字超出显示省略号？

写页面时，遇到文字内容太长显示不全的情况，总让人头疼。面试官也爱拿这个问题考察我们对 CSS 文本处理的掌握程度。别慌，跟着我一步步来，轻松解决这个问题。

/* 设置容器宽度，限定文字显示区域 */
.text-container {
width: 200px;
/* 防止内容溢出容器 */
overflow: hidden;
/* 让超出部分隐藏 */
text-overflow: ellipsis;
/* 强制内容在一行显示 */
white-space: nowrap;
}

width定义了文字能 “活动” 的空间，overflow: hidden把超出的部分悄悄 “藏起来”，text-overflow: ellipsis给末尾加上俏皮的省略号，white-space: nowrap则是让文字乖乖呆在一行，不换行捣乱。就这么简单几行代码，一个美观的省略号效果就实现啦！

第二题：怎样用 CSS 让图片等比例缩放且居中显示？

在做响应式页面时，图片的显示效果至关重要。图片变形、显示不全的问题，不仅影响页面美观，面试时回答不好也会让我们与心仪的工作失之交臂。不过别紧张，下面这些方法，能让图片 “服服帖帖”。

/* 父容器设置为相对定位，作为图片定位的参考 */
.image-container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto; /* 让父容器在水平方向居中 */
}
/* 图片设置为绝对定位 */
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 让图片保持宽高比缩放，同时保证完全显示 */
max-width: 100%;
max-height: 100%;
margin: auto; /* 自动计算边距，实现居中 */
}

先给父容器设定好尺寸并居中，position: relative就像给图片划定了 “活动范围”。图片通过position: absolute在这个范围内 “找位置”，max-width和max-height确保图片按比例缩放，不会 “变形走样”，最后margin: auto让图片稳稳地呆在正中间，是不是很神奇？

面试回答范本

当面试官问到这些问题，我们可以从容地回答：“第一题实现文字超出显示省略号，我会用overflow: hidden隐藏超出部分，text-overflow: ellipsis添加省略号，再配合white-space: nowrap强制单行显示。第二题让图片等比例缩放且居中，我会先给父容器设置相对定位和尺寸，再给图片用绝对定位，通过max-width和max-height保持比例，最后用margin: auto实现居中。这些方法在实际项目中很常用，能有效提升页面的美观度和用户体验。”

在实际开发中，有人觉得 CSS 原生属性已经足够满足日常需求，也有人更喜欢借助 Sass、Less 这些预处理器来写样式。那么问题来了：你觉得 CSS 原生属性和 CSS 预处理器，哪个用起来更得心应手？ 快来评论区分享你的看法，让我们在交流中共同进步。希望今天的内容能给你带来帮助，别忘了点赞关注，明天清晨，我们继续相约，解锁更多 CSS 知识！