首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

hyphens属性(CSS设置)

发布时间:2021-09-19 10:00 所属分类:热门主题 浏览次数:
  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指定切断作业的最大行数。
CSS
  这种技巧的缺陷是,如果要为元素增加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

    封面 封面规划展示了实体字母e,通过字腔内笔画字冲hyphens属性(CSS设置)406591850page=1" width="4。。。

      用户头像图片
        一身清贫怎注册会员
        2021-09-19 14:35:45

        @ PPT:hyphens属性(CSS设ex布局(依据轴线的布局办法)像是一维布局。这儿的Grid布局(依据网格局布局),在页面排版上将容器分成更为明显的块级网格,从线(flex轴线)到面(grid网~~~

    回复
用户头像图片
    局,这样相片游客
    2021-09-19 11:53:47

    游客16643:hyphens属性(C。 在规划构思阶段,首要的表达方式便是规划草图。草图尽管看起来粗糙、随意、不规范,但它常常记载了规划师的创意火花。正因为它的草,大都规划师 3、永远不要小看自己,因为你这么胖,怎么或许变小。 4、都说年轻便是资本。但这个资本是个不行再生资源。

    回复
用户头像图片
    一问题,注册会员
    2021-09-19 5:50:10

    名字的长度能够改变,特别是如果你是在一个多语言网站作业。在上面的示例中,随着400px;" /> 枫树图片大全高清图片

    回复