模仿掘金网页所遇到的问题以及部分解决措施|集创考核第2篇笔记

10.6模仿掘金网页所遇到的问题以及部分解决措施

• 文本溢出后出现省略号，而不是直接截取文字

  • 在写笔记以及主页的静态页面时，对照着掘金本身的网页，发现其在渲染页面的主要内容（即点击进入文章详情的部分时，有一个简要的概述部分，如下图
  • 简述末端出现的省略号相比较直接将原来溢出的文字给删除会显得更为美观，在进行了一段调试之后，发现一下的代码可以实现这个效果(注意在使用时不要落下其中任意一个属性，三个属性缺一不可）

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

• 隐藏滚动条

  • 在掘金的笔记板块中，中间的选择笔记板块内内容溢出后是可以向下滚动的，但是如果直接使用overflow-y这个元素的话，就会发现滚动条 占了原先页面的一部分，不美观的同时也对页面排版会有影响，在各种文档找寻解决办法之后，发现只要对需要设置滚动条的部分设置以下代码，就可以将滚动条隐藏起来的同时实现上下滚动（即在对需要设置滚动条的元素设置样式时，同时使用#note_right_main::-webkit-scrollbar选中滚动条，对滚动条的样式进行设置）

#note_right_main{
    overflow-y: scroll;
}
#note_right_main::-webkit-scrollbar{
    overflow: hidden;
}