iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

  网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种:

  安卓版的浏览器则没有这个问题。

  如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢?答案是使用<optgroup></optgroup>标签。有关optgroup标签的作用可以查看w3school网站的说明。

  正常select下拉列表的html是这样:

<select id="sel_model" class="form-control">
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>
<
option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>
<
option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>
<
option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>
<
option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option> </select>

  加入optgroup标签之后的html是这样:

<select id="sel_model" class="form-control">
<optgroup>
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option>
</optgroup>
</select>    

  然后iOS的Safari浏览器上显示效果如下:

  iOS会根据select下拉列表中的内容长度自动缩小字体,以保证所有内容能在一行显示出来。尽管在HTML中加入了optgroup标签,但通过JQuery获取select选中值的方法不受任何影响。例如我们仍然可以通过$('#sel_model').val()来获取下拉列表的选中值。

  optgroup是一个很神奇的标签!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU1042 N!(大整数类应用)

Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N!InputOne N in one line, process to the end of file.OutputFor each N, output N! in one line.Sample Input123Sample Output126Code&#xff1a;#include <iostream> #includ…

Java内部具有原子更新的动态热交换环境

有人可能会说上述标题可以简称为OSGi &#xff0c;我想在一开始就放弃这种思考过程。 对于OSGi而言&#xff0c;这不是一个冒犯&#xff0c;这是一个很棒的规范&#xff0c;在实现层或可用性层上都弄得一团糟&#xff0c;这就是我对OSGi的信念。 当然&#xff0c;您可以使用OS…

Css Secret 案例Demo全套

Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书&#xff0c;该书揭示了 47 个鲜为人知的 CSS 技巧&#xff0c;主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。去年买入时&#xff0c;就决定将里面所有…

底量超顶量超级大黑马指标源码_底量超顶量+地量买点_月线底量超顶量大牛股,底量超顶量超级大黑马,底量超顶量买入指标,后量超前量买入指标_指标公式分享交流论坛_理想论坛 - 股票论坛...

l 图形特征&#xff1a;(1) 当股价从头部滑落一段时间后&#xff0c;会有一个见底回升的过程。(2) 这个头部区间的成交量称为顶量&#xff0c;见底回升时的成交量称为底量。(3) 如果底量能大大地超过顶量&#xff0c;则较容易通过顶量造成的压力带。…

php var_export与var_dump 输出的不同

问题发现在跟踪yratings_get_targets的时候&#xff0c;error_log(var_export(yblog_mspconfiginit("ratings"),true));老是打印出yblog_mspconfiginit(“ratings”)的返回是NULL 导致我以为是无法建立和DB的连接&#xff0c;走错路了一天。最后才发现&#xff0c;这…

Servlet 开发

1. Servlet &#xff08;很久远的东西&#xff0c;但是现在学习原理&#xff09; html css js 前端页面&#xff08;静态的&#xff09; form action ".html" Servlet 允许将action属性设置为映射&#xff0c;通过映射找到相关的Servlet class 进行数据的处理。…

JAX-RS Bean验证错误消息国际化

Bean验证简介 JavaBeans验证&#xff08;Bean验证&#xff09;是一种新的验证模型&#xff0c;可作为Java EE 6平台的一部分使用。 约束条件支持Bean验证模型&#xff0c;该约束以注释的形式出现在JavaBeans组件&#xff08;例如托管Bean&#xff09;的字段&#xff0c;方法或类…

CentOS 7 Flannel的安装与配置

1. 安装前的准备 etcd 3.2.9 Docker 17.12.0-ce 三台机器10.100.97.236, 10.100.97.92, 10.100.97.81 etcd不同版本之间的差别还是挺大的&#xff0c;使用V3版本跟Flannel整合起来会有坑&#xff0c;下文详解。 2. 安装 sudo yum install -y flannel 安装后&#xff0c;版本是0…

给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解)...

不多说&#xff0c;直接上干货&#xff01; Impala和Hive的关系&#xff08;详解&#xff09; 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤&#xff08;图文详解&#xff09; 参考 hortonworks ambari集成impala ambari hdp 集成 imp…

python调用ffmpeg合并_用ffmpeg命令处理mp4剪切与合并

1. 剪切&#xff1a;./ffmpeg -ss 00:00:06 -t 00:00:12 -i input.mp4 -vcodec copy -acodec copy output.mp4意思是从截取从6秒开始&#xff0c;时长为12秒的视频&#xff0c;格式不变&#xff0c;输入为input.mp4输出为output.mp4-vcodec copy -acodec copy : 编码格式不变2.…

html中常见的小问题(1)

问题&#xff1a;自适应高度的块级元素内添加图片后&#xff0c;其高度会比图片高度多出一块 简单代码如下&#xff1a; <!doctype html> <html><head><style>.box{width:533px;margin:100px auto;border:1px solid red;}</style></head>…

Java程序员的10个XML面试问答

XML面试问题在各种编程工作面试中非常受欢迎&#xff0c;包括针对Web开发人员的Java面试 。 XML是一项成熟的技术&#xff0c;通常用作从一个平台传输数据的标准。 XML面试问题包含来自各种XML技术的问题&#xff0c;例如XSLT&#xff0c;该技术用于转换XML文件&#xff0c; XP…

[转] Java, 使用 Reactor 进行反应式编程

https://www.ibm.com/developerworks/cn/java/j-cn-with-reactor-response-encode/index.html?lnkhmhm转载于:https://www.cnblogs.com/pekkle/p/8311749.html

JmeterAnt构建自动化测试平台

一、jmeter jmeter下载地址为&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 下载完成后&#xff0c;解压文件&#xff0c; 加压后&#xff0c;到biin目录下&#xff0c;点击jmeter.bat启动jmeter(如果是linux环境&#xff0c;给jmeter.sh可执行的权限&#xff0c;…

input复选框checkbox默认样式纯css修改

修改之前的样式 修改之后的样式 html <input type"checkbox" name"btn" id"btn1"><label for"btn1">按钮1</label> css input[type"checkbox"]{width:20px;height:20px;display: inline-block;text-al…

c++word书签_「职场必备」干货!WORD办公软件快捷键,小编整理拿走不谢

小编工作时的照片&#xff0c;不上镜CtrlShiftSpacebar创建不间断空格Ctrl -(连字符)创建不间断连字符CtrlB使字符变为粗体CtrlI使字符变为斜体CtrlU为字符添加下划线CtrlShift缩小字号CtrlShift>增大字号CtrlQ删除段落格式CtrlSpacebar删除字符格式CtrlC复制所选文本或对象…

struts.xml 配置

1.ActionSupport是默认的Action类,若某个action节点没有配置class属性&#xff0c;则ActionSupport即为待执行的Action类 2.在手工完成字段验证&#xff0c;显示错误消息&#xff0c;国际化等情况下&#xff0c;推荐继承ActionSupport 3.result是action节点的子节点&#xff0c…

前端学习---css基本知识

css基本知识 我们先看一个小例子&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div style"background-color:#2459a2;height:…

mysql 从库_mysql数据库主从配置

在一篇文章《离线安装mysql数据库》,讲解了离线安装mysql数据库的过程&#xff0c;本文将讲解mysql数据库的主从配置方法。mysql数据库进行主从配置后&#xff0c;可以实现数据库的备份、同时应用也可以实现读写分离&#xff0c;提高应用的并发量。1、主从原理从《高性能mysql》…

Java内联虚拟方法调用的性能

总览 动态编译的好处之一是&#xff0c;它能够支持在虚拟方法代码上进行广泛的方法内联。 虽然内联代码可以提高性能&#xff0c;但是代码仍然必须检查类型&#xff08;以防由于优化而更改了类型&#xff09;或在多个可能的实现之间进行选择。 这导致了问题。 通过接口调用的…