CSS中，如何处理短内容和长内容？(1)，前端开发汇总

多行文本截断处理

如果要截断多个行，可以使用line-clamp属性。

.element {

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

}

要让这种工作，必须使用display: -webkit-box。-webkit-line-clamp指定截断工作的最大行数。

这种技巧的缺点是，如果要为元素添加padding，它很容易失败。当添加padding时，会导致显示下一行的一部分，这本应该要被截断的。见下图：

水平滚动

有时候，截断或连接一个单词并不总是可行。 例如，当一个长字换成新行时，JavaScript代码可能会变得难以阅读。 在这种情况下，水平滚动将使阅读体验更好。

Padding

在某些情况下，大家可能会忘记添加padding，直到我们注意到一个视觉问题。考虑以下问题：

这里有一个复选框列表，其中有一个非常接近它的兄弟项。发生这种情况的原因是网格上没有间距。这是来自Techcrunch网站的一个真实的例子。

短内容

---

这对大家来说并不常见，但在设计和构建UI时，也是一个要重要考虑的事项。

设置一个最小宽度

回到本文开头向大家展示的一个示例。 我们要如何增强它并使按钮看起来更好？

我们可以通过在按钮上添加min-width来解决此问题，这样一来，它就不会低于该宽度。

现在大家已经对问题及其解决方案有了一定的了解，我们来探索web上的一些用例和示例。

用例和示例

---

个人资料卡

这是长内容的常见示例。 很难预测名称的长度。 我们应该如何应对呢？

/* 方案1 */

.card__title {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

/* 方案2 */

.card__title {

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

}

导航项

在处理多语言布局时，内容长度会发生变化。考虑以下示例

LTR(从左到右)的导航项About比RTL(从右到左)的导航项大。在RTL中，项目看起来太小了。可点击区域太小不利于用户体验。我们能做什么?在这种情况下，最好为导航项设置最小宽度。

.nav__item {

min-width: 50px;

}

文章内容

一个长词或一个链接是很常见的，尤其是在手机上。考虑以下

上面有一个很长的单词，它会上容器溢出导致水平滚动。我们可以通过使用overflow-wrap或hyphens来解决这个问题。

.article-content p {

overflow-wrap: break-word;

}

购物车

产品名可以从一个单词到多行不等。在本例中，由于没有在它们之间添加足够的间距，产品名称太接近删除按钮。

这个解决方案可以通过添加padding或margin来实现，这取决于你们的上下文，为了简单起见，这里使用margin解决方案。

.product__name {

margin-right: 1rem;

}

Flexbox和长内容

flexbox

和长内容会发生某种行为，从而导致元素溢出其父元素。 考虑以下示例：

html

Ahmad Shadeed

Follow

css

.user {

display: flex;

align-items: flex-start;

}

.user__name {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

然而，当内容很长时，这就不起作用了。文本将溢出它的父文件。

原因是 flex 项不会收缩到其最小内容大小以下。为了解决这个问题，我们需要在flex项目.user__meta上设置min-width: 0。

.user__meta {

/* other styles */

min-width: 0;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

[外链图片转存中…(img-zn7mIfJX-1712090301283)]