堆栈内存溢出
  繁体   English   中英

根据目标设备RAM限制DOM元素的数量

[英]limit the amount of DOM elements according target device RAM

 原文  2018-07-29 11:17:34  6   1    javascript/ html/ dom/ web-applications/ ram

问题描述

我使用Flexbox创建了可水平滚动的部分。 服务器可以返回数千个部分。

问题在于目标设备的RAM数量有限。

有没有什么办法可以限制DOM元素的数量并防止出现此问题。

提前致谢

1 个解决方案

解决方案1
 2  2018-07-29 11:29:10

浏览器中的Vanilla javascript在沙箱中运行，因此无法访问系统资源等，因此您无法检测到有多少RAM设备。

仅我的2p但向用户退回1000件物品将是糟糕的UX，更好的设计方法可能是更有效的解决方案

对显示的字数有限制<div>高度</div><div id="text_translate"><p>目前我有水平对齐的卡片，我希望它们的高度相等。 这些卡片包含一张图片、一个标题和一段从我的 API 中提取的段落。参考图片：</p><p> <a href="https://i.stack.imgur.com/Skg3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Skg3T.png" alt="在此处输入图像描述"></a></p><p> 一些卡片的图像和段落比其他卡片大，这让我的 alignment 搞砸了。 我希望能够根据身高而不是根据字数来限制卡片中显示的字数，这样每张卡片都可以固定，最后一个字应该显示...如果段落继续。</p><p> 代码沙盒： <a href="https://codesandbox.io/s/sad-allen-4jsst?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/sad-allen-4jsst?file=/src/App.tsx</a></p><p> 代码：</p><pre> <div className="col-lg-4 col-md-6 col-sm-6 col-12"> <div style={{ display: "block", marginBottom: "20px", cursor: "pointer", textAlign: "center", background: "#FEFEFE", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "10px" }} > <div> <img src="blogContent.png" style={{ width: "100%" }} /> //Small Image </div> <div style={{ padding: "20px", textAlign: "start" }}> <div style={{ color: "#0E2043", fontSize: "13px" }}> Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "15px", fontWeight: "600", marginTop: "10px" }} > Commonwealth Of Dominica Announces The Launch of its New Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "13px", marginTop: "10px" }} > {" "} //Small Content </div> <div style={{ color: "#E3AB50", fontSize: "13px", marginTop: "10px" }} > Read More </div> </div> </div> </div> <div className="col-lg-4 col-md-6 col-sm-6 col-12"> <div style={{ display: "block", marginBottom: "20px", cursor: "pointer", textAlign: "center", background: "#FEFEFE", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "10px" }} > <div> <img src="content2.png" style={{ width: "100%" }} /> //big Image </div> <div style={{ padding: "20px", textAlign: "start" }}> <div style={{ color: "#0E2043", fontSize: "13px" }}> Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "15px", fontWeight: "600", marginTop: "10px" }} > Commonwealth Of Dominica Announces The Launch of its New Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "13px", marginTop: "10px" }} > {" "} // Big content </div> <div style={{ color: "#E3AB50", fontSize: "13px", marginTop: "10px" }} > Read More </div> </div> </div> </div></pre></div>

[英]Having a limit to the amount of words shown according to <div> height

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 大量 dom 元素的问题 如何在ReactJS中定位DOM元素？ 如何在DOM中专门定位元素 从dom中选择一定数量的子元素 根据输入过滤DOM元素-JavaScript 根据给定的标准重新排列DOM元素 限制li元素显示的Java数量 根据 DOM 元素在 DOM 中的位置对包含 DOM 元素的数组进行排序 对显示的字数有限制<div>高度</div><div id="text_translate"><p>目前我有水平对齐的卡片，我希望它们的高度相等。 这些卡片包含一张图片、一个标题和一段从我的 API 中提取的段落。参考图片：</p><p> <a href="https://i.stack.imgur.com/Skg3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Skg3T.png" alt="在此处输入图像描述"></a></p><p> 一些卡片的图像和段落比其他卡片大，这让我的 alignment 搞砸了。 我希望能够根据身高而不是根据字数来限制卡片中显示的字数，这样每张卡片都可以固定，最后一个字应该显示...如果段落继续。</p><p> 代码沙盒： <a href="https://codesandbox.io/s/sad-allen-4jsst?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/sad-allen-4jsst?file=/src/App.tsx</a></p><p> 代码：</p><pre> <div className="col-lg-4 col-md-6 col-sm-6 col-12"> <div style={{ display: "block", marginBottom: "20px", cursor: "pointer", textAlign: "center", background: "#FEFEFE", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "10px" }} > <div> <img src="blogContent.png" style={{ width: "100%" }} /> //Small Image </div> <div style={{ padding: "20px", textAlign: "start" }}> <div style={{ color: "#0E2043", fontSize: "13px" }}> Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "15px", fontWeight: "600", marginTop: "10px" }} > Commonwealth Of Dominica Announces The Launch of its New Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "13px", marginTop: "10px" }} > {" "} //Small Content </div> <div style={{ color: "#E3AB50", fontSize: "13px", marginTop: "10px" }} > Read More </div> </div> </div> </div> <div className="col-lg-4 col-md-6 col-sm-6 col-12"> <div style={{ display: "block", marginBottom: "20px", cursor: "pointer", textAlign: "center", background: "#FEFEFE", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "10px" }} > <div> <img src="content2.png" style={{ width: "100%" }} /> //big Image </div> <div style={{ padding: "20px", textAlign: "start" }}> <div style={{ color: "#0E2043", fontSize: "13px" }}> Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "15px", fontWeight: "600", marginTop: "10px" }} > Commonwealth Of Dominica Announces The Launch of its New Biometric Passport </div> <div style={{ color: "#0E2043", fontSize: "13px", marginTop: "10px" }} > {" "} // Big content </div> <div style={{ color: "#E3AB50", fontSize: "13px", marginTop: "10px" }} > Read More </div> </div> </div> </div></pre></div> 如何在 React 中定位 DOM 元素列表
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM