：flex布局遇到white-space:nowrap失效的问题

最新推荐文章于 2022-06-26 10:43:48 发布
转载 最新推荐文章于 2022-06-26 10:43:48 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/weixin_39072332/article/details/100162537

本文探讨在Flex布局中实现文字超出隐藏并显示省略号的问题，分享使用white-space:nowrap后导致Flex布局失效的经验及解决方案。

前言：

在写界面时遇到一个问题：在flex布局中想实现文字超出隐藏并显示省略号，结果使用white-space:nowrap后，flex布局失效了....

display:flex布局下white-space:nowrap失效问题解决
Flowering_Vivian的博客
11-30 4522
文字长度过长显示省略号的样式设置方法众所周知： h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 然而有一次，我在项目中用到white-space: nowrap的时候，发现它失效了，我的项目是flex布局，宽度自适应的部分，white-space: nowrap撑开了内容区的长度，省略号是显示了，但是父元素的自适应宽度完全不对了。 页面部分布局如下： <template> <
记：flex布局遇到white-space:nowrap失效的问题
sunlit_6的博客
12-05 732
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_39072332/article/details/100162537 在写界面时遇到一个问题：在flex布局中想实现文字超出隐藏并显示省略号，结果使用white-space:nowrap后，flex布局失效了.... 想实现...
移动端开发遇到的坑
m0_63160365的博客
12-07 676
1. new Date（）在IOS上出现值为NAN的问题 我们常用new Date()去获取时间戳，例如 newDate("2017-08-1112:00:00"); 复制代码 但在IOS下，这是使用获取到的值是NAN。原因：因为IOS下的new Date()不支持"-“这个字符解决方法：把”-“改成‘”/"就可以了。例如 newDate("2017-08-1112:00:00".replace(/-/g,"/")); 复制代码 2. Android部分机型使用height和...
IE6IE7Firefox浏览器不兼容原因及解决办法
lwkjob的专栏
07-05 925
IE6IE7Firefox浏览器不兼容原因及解决办法     一、IE6IE7Firefox浏览器不兼容原因及解决办法1.文字 本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占 高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3p...
微信小程序中部分iPhone手机不兼容white-space: nowrap；的解决方案
ljw_Josie的博客
05-06 2298
bug表现 目前发现iPhoneX， iPhone11 pro， iPhone12 pro 等个别机型对强制不换行的样式失效。 解决方案（亲测） 使用CSS box-orient 属性 /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* 这句别漏了，毕竟大部分场景适用
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
tianyaluqingchen的博客
04-11 2262
文字长度过长显示省略号的样式设置方法众所周知： .css { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。 经过搜索排查分析，发现是display: flex;影响的white-space: now
flex布局后overflow: hidden; text-overflow: ellipsis; white-space: nowrap;失效
07-03
我们正在解决一个CSS问题：在Flex布局中，文本溢出处理（使用`overflow:hidden`,`text-overflow: ellipsis`, `white-space: nowrap`）失效。根据引用内容，我们可以找到一些解决方案。问题分析：在Flex容器中，子...
font-size: 12px; display: flex; align-items: center; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;溢出省略不生效
04-16
当`text-overflow: ellipsis`配合`overflow: hidden`和`white-space: nowrap`失效时，请按照以下步骤排查： #### 1. 验证基础条件 - **元素宽度必须固定** 使用像素单位定义明确宽度，如`width: 200px`。百分比或...
<scroll-view scroll-x="true" style='width:100%;white-space:nowrap' class='nav2'>
05-14
确保scroll-view的宽度为100%，设置scroll-x为true，子元素使用white-space:nowrap，并且子项（如nav2类）设置为inline-block或使用flex布局不换行。同时，要注意微信小程序的样式类写法，以及在WXML中的结构。 ...
// 用户昵称 .user-nick-name { width: 0; flex: 1; /* 确保文本在一行内显示 */ white-space: nowrap; /* 隐藏溢出的内容 */ overflow: hidden; /* 使用省略号表示文本溢出 */ text-overflow: ellipsis; font-size: 1.8em; font-weight: 600; color: #333333; } 溢出省略号失效
09-13
要解决 CSS 代码中 `text-overflow: ellipsis` 溢出省略号失效的问题，需满足以下条件并进行相应处理： 1. **添加必要属性**：在包裹文字的外层块级元素上添加三条属性：`overflow: hidden;`（超出文本的部分不显示...
<style> /* 保持原有样式不变 */ .cart-page-section { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 30px; } .cart-page-section table.cart { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .cart-page-section table.cart th, .cart-page-section table.cart td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; } .cart-page-section table.cart th { background-color: #f8f8f8; font-weight: bold; } .cart-page-section table.cart th.product-select, .cart-page-section table.cart td.product-select { width: 8%; text-align: center; vertical-align: middle; white-space: nowrap; } .cart-page-section table.cart td.product-info { width: 37%; vertical-align: top; } .cart-page-section table.cart .product-info .product-image { float: left; margin-right: 15px; width: 100px; height: 100px; } .cart-page-section table.cart .product-info .product-image img { max-width: 100%; height: auto; display: block; } .cart-page-section table.cart .product-info .product-name { overflow: hidden; } .cart-page-section table.cart td.product-price, .cart-page-section table.cart td.product-quantity, .cart-page-section table.cart td.product-subtotal { width: 15%; vertical-align: middle; } /* 添加到现有样式中 */ .add-to-wishlist { display: inline-block; margin-right: 5px; vertical-align: middle; text-decoration: none; } .remove-wrapper { display: inline-block; margin-left: 5px; } .product-remove .remove { display: inline-block; font-size: 20px; line-height: 1; text-decoration: none; color: #ccc; transition: color 0.3s; } .product-remove .remove:hover { color: #f44336; } /* 确保操作列内的按钮在同一行 */ .product-remove { white-space: nowrap; } .add-to-wishlist .wishlist-icon { font-size: 18px; } .cart-page-section table.cart td.product-remove { width: 5%; text-align: center; vertical-align: middle; } .cart-footer-actions { position: sticky; bottom: 0; background: #fff; padding: 15px; border-top: 1px solid #ddd; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; display: flex; flex-direction: column; gap: 15px; } .footer-left { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .coupon-section { display: flex; align-items: center; gap: 10px; } .selected-summary { font-size: 16px; font-weight: bold; flex: 1; } .cart-footer-actions .button { padding: 10px 20px; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; white-space: nowrap; } .cart-footer-actions .button:hover { background-color: #d32f2f; } #partial-checkout { padding: 12px 24px; background-color: #2196F3; color: white; text-decoration: none; border-radius: 4px; display: inline-block; transition: background-color 0.3s; white-space: nowrap; text-align: center; font-weight: bold; } #partial-checkout:hover { background-color: #0b7dda; } #coupon_code { padding: 8px; width: 200px; border: 1px solid #ddd; border-radius: 4px; transition: border-color 0.3s; } #coupon_code:focus { border-color: #2196F3; outline: none; } /* 响应式样式 */ @media (max-width: 768px) { .cart-page-section table.cart thead { display: none; } .cart-page-section table.cart td { display: block; width: 100% !important; text-align: right; padding: 10px; position: relative; padding-left: 50%; } .cart-page-section table.cart td::before { content: attr(data-title); position: absolute; left: 15px; font-weight: bold; text-align: left; } .cart-page-section table.cart .product-info .product-image { float: none; margin: 0 auto 10px; } .cart-footer-actions { flex-direction: column; align-items: flex-start; } .footer-left { width: 100%; justify-content: space-between; } .coupon-section { width: 100%; margin-top: 10px; } .coupon-section input { flex: 1; } .selected-summary { text-align: center; margin-bottom: 10px; } #partial-checkout { width: 100%; padding: 15px; } .cart-footer-actions .button { padding: 12px 15px; margin: 5px 0; width: 100%; text-align: center; } } @media (max-width: 480px) { .cart-page-section { padding: 15px; } .cart-page-section table.cart td { padding-left: 45%; } .cart-page-section table.cart td::before { font-size: 14px; } .cart-footer-actions { padding: 10px; } #coupon_code { width: 100%; } } /* Change WooCommerce AJAX overlay color to black */ .blockUI.blockOverlay { background-color: #000 !important; opacity: 0.3 !important; } </style> is my style in cart.php correct?
最新发布
09-16
white-space: nowrap; } ``` - 确保按钮在同一行显示，防止换行。 ### 验证要点 1. **心愿单图标独立显示**： - 确保不再出现“x♥”组合 - 通过分离HTML结构实现： ```html <a class="add-to-wishlist">...
横向滚动之white-space: nowrap 与padding-right 合用，padding-right失效问题解决方案
new day ! new life
06-25 1661
在项目中，前端通常有横向滚动的操作，且横向滚动条隐藏，通常的实现方式是div嵌套div, 代码如下： <div className='wrapper'> <div className='content'> { filters.map((item, index) => { ret...
Flex布局
weixin_43162418的博客
02-15 188
Flex布局
【css】Flex布局
richest_qi的博客
08-14 1396
Flex容器 display:flex|inline-flex Flex项 Flex容器内的子元素 主轴/交叉轴 Flex项总是沿主轴排列。 默认水平轴为主轴，主轴起点在左端；垂直轴为交叉轴，交叉轴的起点在上端。 即flex-direction默认值是row。 <body> <div class="container flexbox"> <div class="box">1</div> <div class=".
css设置了超出隐藏省略号无效解决
muge1161105403的博客
12-31 2461
verflow: hidden; text-overflow: ellipsis; white-space: nowrap; 设置如上三条，但并没有出现省略号，只需要添加display: block或者display: inline-block即可
小程序/CSS换行
培根芝士的专栏
08-27 1711
word-break： word-break 属性规定自动换行的处理方法。 word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 word-wrap： word-wrap 属性允许长单词或 URL 地址换行到下一行。 word-wrap: normal|break-word; 值 描
文本编辑器 样式失效 white-space: pre；
teng_liang的博客
06-26 1339
后台使用文本编辑器，编辑文案保存后，在前端页面展示的时候，样式失效，没有换行
360兼容模式下white-space: nowrap不起作用
weixin_41969959的博客
04-20 452
设置th 的最小值 min-width:120px;120px根据自己实际情况填写
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值