前端踩坑之旅

Flands 发布于2019-08-23 18:38 / 3571人阅读

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。

文本溢出处理

1. 单行文本溢出显示省略号

overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
white-space: nowrap; （设置文字在一行显示不能换行）
text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

2. 多行文本溢出显示省略号

方法一（css）

-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）

display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ）

-webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式

overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

方法二（js）

  数据获取时：预估字符，过长后截取字符串并手动加上“...”
  slice()、substring()、substr()都有截取字符串的作用
  
  
  （1）str.substring(indexStart, [indexEnd])
  
   注：substring()从提取的字符indexStart可达但不包括 indexEnd
     如果indexStart 等于indexEnd，substring()返回一个空字符串。
     如果indexEnd省略，则将substring()字符提取到字符串的末尾。
     如果任一参数小于0或是NaN，它被视为为0。
     如果任何一个参数都大于stringName.length，则被视为是stringName.length。
     如果indexStart大于indexEnd，那么效果substring()就好像这两个论点被交换了一样； 例如
     str.substring(1, 0) == str.substring(0, 1)
     
     
  （2）str.substr(start, [length])
  
   注：substr()会从start获取长度为length字符（如果截取到字符串的末尾，则会停止截取）。
     如果start是正的并且大于或等于字符串的长度，则substr()返回一个空字符串。
     若start为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从0开截取）。
     如果length为0或为负数，substr()返回一个空字符串。如果length省略，则将substr()字符提取到字符串的末尾。
     
    （3）str.slice(beginIndex[, endIndex])
    
     注：若beginIndex为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从0开始截取）。
        如果beginIndex大于或等于字符串的长度，则slice()返回一个空字符串。
        如果endIndex省略，则将slice()字符提取到字符串的末尾。如果为负，它被视为strLength + endIndex其中strLength是字符串的长度。

坑点

设置display: -webkit-box;后文本属性部分失效例如： text-align: center
webkit-box属性
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis |
inherit，其中默认值是inline-axis，即横向排列
-webkit-box-flex 子元素之间比例，仅作一个系数
-webkit-box-direction 子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group 以组为单位的流体系数
-webkit-box-ordinal-group 以组为单位的子元素排列方向
-webkit-box-lines 子元素是否换行，类似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的对其方式
-webkit-box-pack 子元素水平方向的对其方式

GPU云服务器云服务器学习之旅初踩坑类踩坑必踩坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105575.html

前端踩坑之旅

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。文本溢出处理 1. 单行文本溢出显示省略号 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: nowrap; （设置文字在...

W4n9Hu1 2019-08-02 15:31 评论0 收藏0
前端踩坑之旅

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。文本溢出处理 1. 单行文本溢出显示省略号 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: nowrap; （设置文字在...

amc 2019-08-30 11:22 评论0 收藏0
记一次小程序之旅

摘要：用户绑定的逻辑主要复杂在既需要考虑微信本身的接口在不同情况下提供的数据不同，另外一方面就是考虑本身用户模块的业务逻辑问题。针对每一节课以及每一节系列课程生成小程序太阳码主要涉及到几个细节问题。感觉已经好久没写程序了，最近这段时间，一方面是学习了python，然后折腾了scrapy框架，用python写了下守护进程程序监听任务以及用redis做队列任务通信，并开进程来处理爬虫任务。以上...

不知名网友 2019-07-01 10:31 评论0 收藏0
handlebars踩坑之旅

摘要：的使用方法遍历数组或者对象刀歌云数组遍历时索引值为对象为判断是否有传参有的话使用传参的值没有的话使用默认值判断对应适用数据数据取出错误这里判断是否存在数组，如果存在则遍历，如果不存在输出错误信息判断是否是第一个或者是 1. each的使用方法(遍历数组或者对象) {{include tpl/components/page3-school-slide/each-slide ...

cjie 2019-08-22 13:59 评论0 收藏0
weex踩坑之旅第二弹 ~ 在weex中集成vue-router

摘要：也就是说在中，我们的代码是要在环境中运行。而在中，是没有等以及的，即所有的框架都是不可以使用的。比如相关组件，相关组件，等都不能在中引用。是可以在中使用的。接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-a...

tyheist 2019-08-21 18:25 评论0 收藏0