hyphens属性(CSS设置)
hyphens属性(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-wrap或hyphens来处理这个问题。
.article-contentp{
overflow-wrap:break-word;
}
购物车
产品名能够从一个单词到多行不等。在本例中,因为没有在它们之间增加足够的距离,产品称号太挨近删去按钮。
这个处理计划能够通过增加padding或margin来完成,这取决于你们的上下文,为了简略起见,这儿运用margin处理计划。
.product__name{
margin-right:1rem;
}
Flexbox和长内容
flexbox
和长内容会产生某种行为,然后导致元素溢出其父元素。考虑以下示例:
html
AhmadShadeed
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{
/*otherstyles*/
min-width:0;
}
作品标签: CSS
优秀作品:
评论列表(共317人参与)参与讨论或分享设计作品获得视觉癖积分奖励
下雨,冲注册会员
2021-09-19 20:15:48
必定的相似性,都能够指定容器内部多个项目的方位。可是,它们也存在严重差异。 Flex布局是轴线布局,只能指定项目针对轴线的容器内部多个项目的方位。可是,它们也存在重大差异。 Flex布局是
回复 PPT注册会员
2021-09-19 4:58:55
局,这样相片游客
2021-09-19 11:53:47
游客16643:hyphens属性(C。 在规划构思阶段,首要的表达方式便是规划草图。草图尽管看起来粗糙、随意、不规范,但它常常记载了规划师的创意火花。正因为它的草,大都规划师 3、永远不要小看自己,因为你这么胖,怎么或许变小。 4、都说年轻便是资本。但这个资本是个不行再生资源。
回复一问题,注册会员
2021-09-19 5:50:10
名字的长度能够改变,特别是如果你是在一个多语言网站作业。在上面的示例中,随着400px;" /> 枫树图片大全高清图片
回复