关于html:CSS中如何处理短内容和长内容

46次阅读

共计 3215 个字符,预计需要花费 9 分钟才能阅读完成。

作者:shadeed
译者:前端小智
起源:ishadeed

点赞再看 ,微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景,但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。

最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。

github 地址:https://github.com/qq44924588…

当咱们应用 CSS 构建布局时,思考长短文本内容很重要,如果能分明地晓得当文本长度变动时须要怎么解决,能够防止很多不必要的问题。

在许多状况下,增加或删除一个单词会扭转 UI 的外观,更糟的是,它可能会毁坏原有的设计,使其无法访问。在我学习 CSS 的晚期,我低估了增加或删除一个单词的作用。在本文中,我会介绍几种不同的技巧,智米们能够马上应用它们来解决 CSS 中不同长度的文本。

问题

在探讨解决文本内容的技巧之前,先来解释一下这个问题,假如咱们有一个垂直导航。

名字的长度能够变动,特地是如果你是在一个多语言网站工作。在下面的示例中,随着名称变长,它被包装到第二行。这里有一些问题

  • 应该把这段文字截短吗
  • 应该换成多行吗?如果是,最多能够换行多少行?

这种状况下单词比预期的多,然而当单词太长时会产生什么呢? 默认状况下,它将溢出其容器。

作为业余前端开发人员,重要的是要确定在这种状况下应该要晓得怎么解决。侥幸的是,有一些 CSS 属性就是专门用于解决此类问题。

除此之外,问题不仅在于长内容,短内容也会毁坏 UI,或者至多会让它看起来很奇怪。如上面的示例

带有 ok 文本的按钮的宽度十分小。我并不是说这是一个致命的问题,但它会让按钮看起来很弱或很难被留神到。

在这种状况下咱们该怎么办?兴许在按钮上设置min-width?无论内容长度如何,都能够提供平安的宽度。

长内容

在,大家曾经对问题有所理解,咱们接着深入研究 CSS 技巧,这些技巧可为解决长内容提供解决方案。

overflow-wrap

CSS 属性 overflow-wrap 是用来阐明当一个不能被离开的字符串太长而不能填充其包裹盒时,为避免其溢出,浏览器是否容许这样的单词中断换行。

Hyphens

CSS 属性 hyphens 告知浏览器在换行时如何应用连字符连贯单词。能够齐全阻止应用连字符,也能够管制浏览器什么时候应用,或者让浏览器决定什么时候应用。

.element {hyphens: auto;}

文本截断解决

截断是指在句子的开端增加点,以表明有更多的文本内容。

没有 text-truncation 属性或其余属性,然而它混合了一些 CSS 属性,能够为咱们实现工作。

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本截断解决

如果要截断多个行,能够应用 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-wraphyphens来解决这个问题。

.article-content p {overflow-wrap: break-word;}

购物车

产品名能够从一个单词到多行不等。在本例中,因为没有在它们之间增加足够的间距,产品名称太靠近删除按钮。

这个解决方案能够通过增加 paddingmargin来实现,这取决于你们的上下文,为了简略起见,这里应用 margin 解决方案。

.product__name {margin-right: 1rem;}

Flexbox 和长内容

flexbox

和长内容会产生某种行为,从而导致元素溢出其父元素。思考以下示例:

html

<div class="user">
  <div class="user__meta">
    <h3 class="user__name">Ahmad Shadeed</h3>
  </div>
  <button class="btn">Follow</button>
</div>

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;
}

总结

我心愿智米们曾经学会了解决 CSS 中短内容和长内容的不同技巧。我很喜爱这篇文章,因为它帮忙我记住了一些小细节,这对将来的我的项目会很有帮忙。

完~ 我是小智,咱们下期见~


代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文:https://isheed.com/article/cs…

交换

文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。

正文完
 0