前言
今天在移动端开发的时候,遇到一个块级文本省略ios手机无效的问题,这种问题形成的原因是什么呢?chrome里面是正常的,为啥ios里面不行?解决方案又是什么呢?
文本省略回顾
我很早很早之前的文章介绍了文本省略的方式,其中有一行和多行,请看:https://www.haorooms.com/post/css_common
文章的第十二条。
但是单行文本省略在如下结构里面,特别是在ios手机里面
今天在移动端开发的时候,遇到一个块级文本省略ios手机无效的问题,这种问题形成的原因是什么呢?chrome里面是正常的,为啥ios里面不行?解决方案又是什么呢?
我很早很早之前的文章介绍了文本省略的方式,其中有一行和多行,请看:https://www.haorooms.com/post/css_common
文章的第十二条。
但是单行文本省略在如下结构里面,特别是在ios手机里面
两个emoji表情可以拼接成一个emoji,这就给我们处理和截取字符串增加了难度,之前我有文章,截取emoji表情,具体可以看一下。
拼接规则如下:
👩 + ✈️ → 👩✈️
👨 + 💻 → 👨💻
👰 + ♂️ → 👰♂️
🐻 + ❄️ → 🐻❄️
🏴 + ☠️ → 🏴☠️
🏳️ + 🌈 → 🏳️🌈
👨 + 🦰 → 👨🦰 (有意思的是:发色是通过 ZWJ 组合基础 emoji 实现,而肤色则是用肤色修饰符实现)
👨🏻 + 🤝 + 👨🏼 → 👨🏻🤝👨🏼
👨 + ❤️ + 👨 → 👨❤️👨
👨 + ❤️ + 💋 + 👨 → 👨❤️💋👨
👨 + 👨 + 👧 → 👨👨👧
👨 + 👨 + 👧 + 👧 → 👨👨👧👧
正则表达式零宽断言,导致ios手机webview白屏问题,我也是头一次遇到,主要原因是一些零宽断言在iOS WebView中不被支持,编译报错直接引起手机白屏。解决办法主要是使用替代方案来支持。
chatgpt,madejourney(简称MJ),stable diffusion(简称SD),等智能AI的应用特别流行,我们看看chatgpt是如何定义零宽断言的。
零宽断言是正则表达式中的一种特殊语法,用于在匹配字符串时,指定一个位置,该位置前或后必须满足特定的条件。零宽断言不会消耗匹配的字符,因此也称为“零宽度”。
零宽断言分为向前零宽断言和向后零宽断言,分别用于指定当前位置之前或之后的条件。
向前零宽断言的语法为:(?<=pattern),其中pattern为一个正则表达式,表示当前位置之前必须匹配pattern才能继续匹配。
向后零宽断言的语法为:(?=pattern),其中pattern为一个正则表达式,表示当前位置之后必须匹配pattern才能继续匹配。
例如,正则表达式/(?<=hello)world/可以匹配字符串“helloworld”,但不会匹配“world”或者“hello world”。
零宽断言在正则表达式中非常有用,可以用于复杂的匹配场景,例如匹配特定格式的日期、时间、邮箱地址等。但是,零宽断言也可能会导致正则表达式性能下降,因此在使用时需要谨慎。
之前文章也有介绍给useState,包括手写一个useState,但是都没有介绍useState 异步回调获取不到最新值的问题,今天简单聊一聊。
1、直接传入新值 setState(options);
const [state, setState] = useState(0);
setState(state + 1);
2、传入回调函数 setState(callBack);
const [state, setState] = useState(0);
setState((prevState) => prevState + 1); // prevState 是改变之前的 state 值,return 返回的值会作为新状态覆盖 state 值
简单介绍一下overscroll-behavior的一些应用场景。例如Mac 左右滚动误触返回,部分区域滚动到底部触发连锁反应等等。
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法,让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。
默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
在某些情况下我们不想要这些表现,使用 overscroll-behavior 来去除不需要的滚动链,以及类似 QQ 一类的应用下拉刷新效果。