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

最新推荐文章于 2020-05-09 16:27:07 发布
转载 最新推荐文章于 2020-05-09 16:27:07 发布 · 371 阅读 · 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中Safari浏览器select下拉列表文字太长被截断的处理方法.docx
07-17
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
IOS中safari下的select下拉菜单文字过长不换行的解决方法
09-01
在iOS的Safari浏览器中，`<select>`下拉菜单中的长文字选项可能会导致显示问题，尤其是当文字过长而不换行时，这会影响到用户体验。为了解决这个问题，开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...
safari input 行高问题解决
jiubai_9000的博客
09-07 3097
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
HTML中下拉框宽度固定，但是option有很长的时候
曹立_在大连
11-28 8828
要用ajax做个两级联动的下拉框，第二个框有时候内容太长会自动变长，但是页面的就变很难看遇到这么个问题，在html实际采用select是解决不了问题的还好我们可以曲线救国：   1 12 123 1234 12345 123456 1234567 12345678 123456789 1234567890 12345678909 123456789098 1234567890987 1
select在各个浏览器中的兼容性问题
web开发自学
01-30 420
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。 下面我们通过对主要CSS属性的支持，打造全兼容select。 对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.1...
解决select option文字过长换行
热门推荐
Owen的博客
02-13 2万+
.selbox{ width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } width/ white-space/ overflow，这三个属性是必要条件。
uniapp下拉菜单在ios上显示不全
03-20
如果下拉菜单使用fixed定位，并且没有考虑到安全区域，特别是在iOS中，fixed元素的位置可能不正确。例如，底部弹出的菜单如果没有设置bottom: env(safe-area-inset-bottom)，可能会被遮挡一部分。 接下来是z-index...
ios 上select选择显示不全
最新发布
03-20
嗯，用户之前问过关于uniapp下拉菜单在iOS上显示不全的问题，现在又问了iOS上select选择显示不全的情况。可能他们遇到了类似的问题，但这次是针对原生的select元素，而不是uniapp的自定义组件。需要先确认用户指的是...
IOS中select下拉框文字过长不换行并且出现省略号的解决方法
hmyhicc的博客
11-21 3694
今天在做一个混合型APP时，遇到在ios中的下拉框文字不换行，并且出现省略号的情况，经上网查证使用<optgroup>标签即可。 <optgroup>标签定义选项组。 <optgroup>标签用于组合选项。当你使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。 如下：
隐藏、显示select下option标签
Wu_Application的博客
01-30 9674
首先是两种隐藏select 下 option标签的方法： &lt;option value="hide" style='display:none'&gt;不需要&lt;/option&gt; $("select option[value='hide']").css('visibility','hidden'); 第一种方法不兼容IE。 第二种方法兼容IE；但option标签的位置还在，只是内...
select标签中option的显示隐藏控制(兼容IE)
weixin_30387663的博客
06-25 950
问题描述： 　　在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。（ie浏览器中option不支持display:none;） 解决方案： <script> /*参数说明： 需被控制的Select对象， 需显示的option序号(留空...
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不能隐藏的问题。
zhaoningwang的博客
01-15 1622
//将select通过clone方法保存 var select= $("#select").clone();   //删除所有的option $("#select").find('option').remove();   //查找出需要显示的option并复制 var options = select.find("option[value=1]").clone();   //将需...
前端select下拉选项框错位
ccjavac的博客
05-09 1447
屏幕尺寸过小或缩放时 select下拉框位置偏上移动 解决： 标签加 transfer 属性 <Select transfer> ... </Select>
safari 移动端适配问题 padding 不起作用
Young_Gao的博客
04-18 2855
苹果黑科技。。。。。。。。。[;padding:0;margin:0;];  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值