html5网站建设,有什么网站用名字做图片,wordpress文档编辑器,东南亚营销型网站建设与网络推广CSS中处理不同长度文本的几种小技巧【推荐教程#xff1a;CSS视频教程 】当我们使用 CSS 构建布局时#xff0c;考虑长短文本内容很重要#xff0c;如果能清楚地知道当文本长度变化时需要怎么处理#xff0c;可以避免很多不必要的问题。在许多情况下#xff0c;添加或删除…CSS中处理不同长度文本的几种小技巧【推荐教程CSS视频教程 】当我们使用 CSS 构建布局时考虑长短文本内容很重要如果能清楚地知道当文本长度变化时需要怎么处理可以避免很多不必要的问题。在许多情况下添加或删除一个单词会改变 UI 的外观更糟的是它可能会破坏原有的设计使其无法访问。在我学习 CSS 的早期我低估了添加或删除一个单词的作用。在本文中我会介绍几种不同的技巧大家可以马上使用它们来处理CSS中不同长度的文本。问题在讨论处理文本内容的技巧之前先来解释一下这个问题假设我们有一个垂直导航。名字的长度可以变化特别是如果你是在一个多语言网站工作。在上面的示例中随着名称变长它被包装到第二行。这里有一些问题应该把这段文字截短吗应该换成多行吗 如果是最多可以换行多少行这种情况下单词比预期的多但是当单词太长时会发生什么呢?默认情况下它将溢出其容器。作为专业前端开发人员重要的是要确定在这种情况下应该要知道怎么处理。 幸运的是有一些CSS属性就是专门用于解决此类问题。除此之外问题不仅在于长内容短内容也会破坏UI或者至少会让它看起来很奇怪。如下面的示例带有ok文本的按钮的宽度非常小。我并不是说这是一个致命的问题但它会让按钮看起来很弱或很难被注意到。在这种情况下我们该怎么办 也许在按钮上设置min-width 无论内容长度如何都可以提供安全的宽度。长内容在大家已经对问题有所了解我们接着深入研究CSS 技巧这些技巧可为处理长内容提供解决方案。overflow-wrapCSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时为防止其溢出浏览器是否允许这样的单词中断换行。HyphensCSS 属性 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-wrap或hyphens来解决这个问题。.article-content p {overflow-wrap: break-word;}购物车产品名可以从一个单词到多行不等。在本例中由于没有在它们之间添加足够的间距产品名称太接近删除按钮。这个解决方案可以通过添加padding或margin来实现这取决于你们的上下文为了简单起见这里使用margin解决方案。.product__name {margin-right: 1rem;}Flexbox和长内容flexbox和长内容会发生某种行为从而导致元素溢出其父元素。 考虑以下示例htmlAhmad ShadeedFollowcss.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中短内容和长内容的不同技巧。我很喜欢这篇文章因为它帮助我记住了一些小细节这对未来的项目会很有帮助。
