关于IOS中safari下的select下拉菜单，文字过长不换行的问题

最新推荐文章于 2020-06-16 11:08:03 发布
转载 最新推荐文章于 2020-06-16 11:08:03 发布 · 379 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/front-end-1149980941/p/5909496.html

本文介绍了使用<optgroup>标签解决长文本在页面上显示不全的问题。该标签可用于组合选项，使得处理长选项列表更为方便。

今天遇到下图这种问题，文字过长，显示不全。折腾了老半天，在网上搜了半天也找不到解决方案。

 

于是问了下同事，同事提到了<optgroup>，这个标签厉害。

<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

 

转载于:https://www.cnblogs.com/front-end-1149980941/p/5909496.html

移动端苹果IOS中select的option值不显示问题解决
weixin_41346436的博客
12-26 3699
移动端苹果IOS中select的option值不显示问题解决 遇到一个问题就是最原始的select标签在安卓手机上显示正常，但是在IOS苹果高版本上点击select，在页面上有占位，随便点击也可以将值选在文本框中，但是内容不显示,直接留白 1:这种情况发生于高版本的IOS系统中，然后观察了一下请选择和动态加载的option有什么区别，就是动态加载的值只用label绑定了，option标签中间并没有...
safari input 行高问题解决
jiubai_9000的博客
09-07 3109
input{ width:250px; height:30px; line-height:30px; font-size:14px; padding:0px 0px 0px 30px; [;height:20px;line-height:normal;padding:10px 0 0 30px;]/*safari hack*/只在safari浏览器使用这个 padding+heigh
select在各个浏览器中的兼容性问题
web开发自学
01-30 425
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。 下面我们通过对主要CSS属性的支持，打造全兼容select。 对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.1...
HTML中下拉框宽度固定，但是option有很长的时候
曹立_在大连
11-28 8849
要用ajax做个两级联动的下拉框，第二个框有时候内容太长会自动变长，但是页面的就变很难看遇到这么个问题，在html实际采用select是解决不了问题的还好我们可以曲线救国：   1 12 123 1234 12345 123456 1234567 12345678 123456789 1234567890 12345678909 123456789098 1234567890987 1
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法.docx
07-17
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
解决select option文字过长换行
热门推荐
Owen的博客
02-13 2万+
.selbox{ width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } width/ white-space/ overflow，这三个属性是必要条件。
IOS中safari下的select下拉菜单文字过长不换行的解决方法
09-01
在iOS的Safari浏览器中，`<select>`下拉菜单中的长文字选项可能会导致显示问题，尤其是当文字过长而不换行时，这会影响到用户体验。为了解决这个问题，开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...
ios部分机型出现select、input等控件点击后失效不可再次点击dug
qq_40665861的博客
11-12 1094
问题描述 在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。 问题分析 当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。 多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...
uniapp下拉菜单在ios上显示不全
最新发布
03-20
如果下拉菜单使用fixed定位，并且没有考虑到安全区域，特别是在iOS中，fixed元素的位置可能不正确。例如，底部弹出的菜单如果没有设置bottom: env(safe-area-inset-bottom)，可能会被遮挡一部分。 接下来是z-index...
IOS中select下拉框文字过长不换行并且出现省略号的解决方法
hmyhicc的博客
11-21 3718
今天在做一个混合型APP时，遇到在ios中的下拉框文字不换行，并且出现省略号的情况，经上网查证使用<optgroup>标签即可。 <optgroup>标签定义选项组。 <optgroup>标签用于组合选项。当你使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。 如下：
前端select下拉选项框错位
ccjavac的博客
05-09 1465
屏幕尺寸过小或缩放时 select下拉框位置偏上移动 解决： 标签加 transfer 属性 <Select transfer> ... </Select>
想让 thymeleaf 不显示select下的某个option
weixin_42046751的博客
06-16 1310
模板引擎用的thymeleaf，要根据判断条件隐藏某个option， 因为CSS没法隐藏option， 所以用 th:block 块标签(空标签) 直接去控制整个option元素是否显示， 如下： <select id="userType" name="userType" class="form-control m-b" th:with="type=${@dict.getType('sys_user_type')}"> <th:block th:each="dict :.
SELECT中OPTION元素的显示隐藏
永立的专栏
07-31 2万+
在Chrome和Firefox浏览器中，有两种方式控制显示隐藏。 1、option元素的hidden属性，true为隐藏，false为显示； 2、option元素的style.display设置为none则为隐藏； 这两种方式都可以通过JS来控制。在IE中，很麻烦，上面两种方式都不支持，目前的办法是给外面加一层隐藏的span,参考网址：http://blog.baiwand.com/?post
select标签中option的显示隐藏控制(兼容IE)
weixin_30387663的博客
06-25 959
问题描述： 　　在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。（ie浏览器中option不支持display:none;） 解决方案： <script> /*参数说明： 需被控制的Select对象， 需显示的option序号(留空...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值