前端 CSS 面试题, CSS 怎么实现单行,多行文本溢出隐藏?

QA

Step 1

Q:: CSS 如何实现单行文本溢出隐藏？

A:: 为了实现单行文本的溢出隐藏并在末尾显示省略号，可以使用以下 CSS 样式：

 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这些样式的作用分别是： - overflow: hidden;：隐藏超出容器的内容。 - text-overflow: ellipsis;：当文本溢出时，用省略号代替超出的文本。 - white-space: nowrap;：禁止文本换行，从而确保文本在一行内显示。

Step 2

Q:: CSS 如何实现多行文本溢出隐藏？

A:: 为了实现多行文本的溢出隐藏并在末尾显示省略号，可以使用以下 CSS 样式：

 
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

这些样式的作用分别是： - overflow: hidden;：隐藏超出容器的内容。 - display: -webkit-box;：将元素设置为基于 WebKit 的盒模型。 - -webkit-line-clamp: 3;：限制文本显示的行数，这里设置为 3 行。 - -webkit-box-orient: vertical;：设置盒子为垂直方向。 - text-overflow: ellipsis;：当文本溢出时，用省略号代替超出的文本。

用途

溢出隐藏和文本截断是前端开发中常见的需求，特别是在响应式设计中。实际生产环境中，前端页面需要展示不同长度的文本内容，而这些内容需要在有限的空间内合理呈现。这时候就需要通过 CSS 来控制文本的显示效果，确保页面美观且用户体验良好。面试中考察这一知识点，主要是评估候选人对 CSS 基础的掌握程度，以及解决实际布局问题的能力。\n

相关问题

🦆

如何实现一个固定宽高的元素,其内容超出部分实现滚动效果?▷

可以通过以下 CSS 样式实现：

 
width: 200px;
height: 100px;
overflow: auto;

overflow: auto; 会在内容超出容器时自动添加滚动条。

🦆

如何使用 CSS 实现垂直居中?▷

实现垂直居中的方法有多种，以下是几种常见的： 1. 使用 flex 布局：

 
display: flex;
justify-content: center;
align-items: center;

2. 使用绝对定位和负边距：

 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

3. 使用 line-height（适用于单行文本）：

 
line-height: 100px;
height: 100px;

这种方法通过将 line-height 设置为与元素的 height 相同来实现文本的垂直居中。

🦆

如何实现一个元素的背景图像在其内部固定?▷

可以使用 background-attachment: fixed; 来实现背景图像的固定，通常还需要设置 background-position 和 background-size 来控制图像的位置和大小。

 
background-image: url('image.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;

🦆

如何通过 CSS 实现响应式图片?▷

可以使用 max-width 属性将图片设置为响应式：

 
img {
  max-width: 100%;
  height: auto;
}

这意味着图片在宽度超出容器时会缩放，但不会超出原始尺寸。

预处理器如 scss 和 less与 CSS 有什么区别说说你对 Flex 布局的理解及其使用场景