ios safari对min-width: 0解析更保守，因保留img/iframe等替换元素固有最小尺寸，需显式设min-width: 0和flex-shrink: 1才生效；white-space: nowrap须写在含文本的子元素上，否则text-overflow失效；flex-basis: 0在旧版中易误读，建议用flex-basis: 0%或0px兜底；overflow-x: auto需配合-webkit-overflow-scrolling: touch启用惯性滚动。
为什么iOS Safari对min-width: 0解析更保守
iOS Safari（尤其15–16）会保留替换元素（<img>、<iframe></iframe>）的固有最小尺寸，即使你写了max-width: 100%，它也可能无视——除非显式加min-width: 0和flex-shrink: 1到该元素本身。DevTools里看computed值，如果min-width仍是auto，就说明没生效。
white-space: nowrap写错层级导致text-overflow失效
在iOS Safari里，text-overflow: ellipsis必须配合white-space: nowrap才能触发单行截断，但这个white-space必须写在**含文本的子元素上**，比如<span></span>或<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries"><img
src="https://img.php.cn/upload/skill/000/000/081/178971312885770.jpg" alt="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" class="overflowclass">Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries</a>
<p class="overflowclass">规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...</p>
</div>
<a rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，不能只写在父容器。否则文字提前折行，根本没机会溢出，省略号自然不出现。
flex-basis: 0在旧Safari中解析异常
flex: 1 1 0本意是让子项初始宽度为0px，但某些iOS Safari版本会把0误读为0%甚至忽略，导致仍按内容宽度起始。稳妥做法是补一句flex-basis: 0%兜底，或者直接用flex: 1 1 0px（注意单位），同时保留min-width: 0。
overflow-x: auto被默认禁用拖拽
给Flex容器设了overflow-x: auto，但在iOS Safari里手动拖不动——这不是bug，而是默认行为。必须加-webkit-overflow-scrolling: touch或overscroll-behavior-x: contain才能启用惯性滚动。漏掉这条，横向滚动条可能显示但无法滑动。
min-width: 0、overflow: hidden、white-space: nowrap、text-overflow: ellipsis这四者没落在同一元素上，且该元素没被父容器的width或max-width约束住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
