jquery – HTML – SELECT标签的OPTION部分突出显示文本

2023年12月16日 205次阅读

当我选择选项并水平滚动以阅读完整内容时,它会显示部分内容,但取消选择和滚动会显示完整内容.

怎么克服这个？简单的答案很明显！

问题样本：

选择选项后水平滚动

《jquery – HTML – SELECT标签的OPTION部分突出显示文本》

取消选择选项后水平滚动

《jquery – HTML – SELECT标签的OPTION部分突出显示文本》

编辑1：

实际发生的是成员动态添加到HTML.我使用Bootstrap和JQuery框架.

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!DOCTYPE html>


	<head>
		<title> Select - Option example </title>    
		
	</head>
	
	<body>
		<div class="container">			
			<form class="row form-horizontal" id="admin_promote_members">
              
                <div class="form-group">
                    <div class="col-sm-2 col-xs-6">
                        <h3 style="text-align: center">Admins</h3>
                        <select class="form-control" id="admin_view_admins" size="10" style="overflow:auto;">
                            <option value="1">testing1.testing@testingtesting.comExcessTextHidesOnSelecting</option>
							<option value="1">testing2.testing@testingtesting.comExcessTextHidesOnSelecting</option>
							<option value="1">testing3.testing@testingtesting.comExcessTextHidesOnSelecting</option>
							<option value="1">testing4.testing@testingtesting.comExcessTextHidesOnSelecting</option>
							<option value="1">testing5.testing@testingtesting.comExcessTextHidesOnSelecting</option>
                        </select>
                        <div style="padding-top: 20px; text-align: center;">
                            <button type="button" class="btn btn-danger" id="admin_admin_demote"><text> &lt;&lt; </text>Demote</button>
                        </div>
                    </div>
                </div>
			</form>
		</div>
	</body>

编辑2(解决方案)：正如@yuri建议的那样,将CSS转换为“option {display：table;}解决了问题.

最佳答案 您可以尝试为< option>设置样式.标签：

option {display: table}

Fiddle

另请参阅文本溢出,自动换行和那些文本截断规则

点赞