入门 CSS 悬停或焦点时截断展开

什么是悬停和焦点？

在 CSS 中，悬停和焦点是两种常见的状态。当用户将鼠标悬停在一个元素上时，该元素将会变化或者展示更多的信息；当元素获取到焦点时，将有特殊的标记或反应。这两种状态可以用 CSS 来控制，让网页具有更好的交互性和可用性。

使用 CSS 截断文本

有时候，我们需要将文本截断以适应容器大小，防止溢出，如果不想使用滚动条，可以使用 CSS 属性来实现。例如，要将段落文本截断到两行，可以使用以下 CSS 代码：

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

这个代码将把所有的段落文本显示在 -webkit-box 中，设置将盒子方向垂直、只显示两行，超过的部分将隐藏。这个技巧可以适用于大多数浏览器中。

显示更多内容

在上面的例子中，我们截断了段落文本，但是我们也可以让被截断的文本在悬停或者焦点时展示更多内容。我们可以使用 CSS 的 :hover 伪类来实现悬停效果，用 :focus 伪类来实现焦点效果。

我们来看一个例子，当鼠标悬停在段落上方时，显示完整文本：

p:hover {
  -webkit-line-clamp: initial;
}

这个代码让段落重新显示全部文本，当鼠标移开时又截断了文本。同样的，我们可以用类似的代码来实现输入框获得焦点时展示更多内容的效果：

input:focus {
  width: 300px;
}

这个代码会在输入框获得焦点时扩大输入框的宽度，以便用户更好地编辑内容。

结论

通过使用悬停和焦点状态，我们可以改进网页的交互和可用性。而截断文本则是控制元素大小的一个重要技巧。以上这些技巧都可以通过简单的 CSS 属性实现。

因此，在设计网页和编写代码时，应该更注重交互和用户体验方面，利用好 CSS 技巧，让用户的使用体验更好。