HTML 选择在点击时截断文本（使用 Google Chrome）答案

【问题标题】：HTML select truncates text on click (using Google Chrome)HTML 选择在点击时截断文本（使用 Google Chrome）
【发布时间】：2020-06-19 21:50:45
【问题描述】：

我正在尝试创建一个简单的选择元素。

选项的长度事先不知道，取决于用户的输入。

我目前使用的代码是：

<html>
<head>
</head>
<body>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td valign="top" width="325">
                    <select multiple="" size="10" style="overflow-x:auto; overflow-y:auto; width:320px;">
                        <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
                        <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

我希望选择元素具有固定宽度，然后当输入长行时，用户应该能够滚动。

问题

当我选择它时，使用当前代码会截断选项的文本（'a's 的数量等于'b's 的数量）：

有谁知道在选择选项时如何解决截断问题？

【问题讨论】：

问题是什么？
@Pangloss 我编辑了问题（最后一行）。我希望现在更清楚了。
您在哪些浏览器中测试过？它在哪里不起作用？您可以发布小提琴或可复制的东西吗？您粘贴的代码对我有用，所以我认为问题出在其他地方或与我使用的浏览器不同。
我编辑了这个问题。我正在使用谷歌浏览器 43
您在寻找this吗？

标签： html css

【解决方案1】：

option 标签继承父 select 标签的宽度。这意味着通过将选择宽度定义为 325 像素，您也将每个选项的宽度定义为 325 像素。我不知道为什么它只适用于选定的选项，我正在研究它。

您可以创建一个包装器元素并将select 标记的样式应用于wrapper。像这样：

table{
  border:0;
  width:100%;
  margin:0;
  padding:0;
}
.wrapper{
  overflow:auto; 
  width:320px;
  height: calc(18px * 3); /*Option height * (select size+1)*/
  vertical-align:top;
  border:1px solid grey;
}
select{
  border:0;
  height:calc(100% - 2px);
  overflow-y:visible;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="wrapper">
          <select multiple size="2">
            <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
            <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

尽管您可以看到，这会将垂直滚动条隐藏在屏幕之外，因此它不是一个完美的解决方案。如果我找到其他解决方案，我会更新我的答案。

另外，你可能已经注意到我使用了相应的 CSS 属性而不是 table 和 td 标签的属性：现在这更被认可，但你的方法很好，所以如果你恢复它也没有坏处。

【讨论】：

【解决方案2】：

增加选择框的宽度。例如

<html>
<head>
</head>
<body>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td valign="top" width="325">
                    <select multiple="" size="10" style="overflow-x:auto; overflow-y:auto; width:820px;">
                        <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
                        <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【讨论】：

事先不知道宽度。
这对导出宽度有用吗stackoverflow.com/questions/10585014/…
我希望这可以在 chrome 中完成，而不需要像 jQuery 这样的重型机器。

【解决方案3】：

或者你可以隐藏选择并在div中创建选择框：

$('.opt').on('click', function(e)
{
	var opt = $('#sel').find('option[value="' + $(this).attr('id') + '"]');
	if(opt.prop('selected') == true)
	{
		opt.prop('selected', false);
		$(this).removeClass('bg1');
	}	
	else
	{
		opt.prop('selected', 'selected');
		$(this).addClass('bg1');
	}	
});

table{
  border:0;
  width:100%;
  margin:0;
  padding:0;
}
select {
	width:320px;
	overflow:auto;
}
.wrapper{
  overflow:auto; 
  width:320px;
  line-height:1.1em;
  height:7.65em;
}
.opt {
	white-space:pre;
	width:auto;
}
.bg1 {
	background-color:#99d
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
          <select id="sel" multiple size="7">
            <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
            <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b3">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b4">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b5">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b6">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b7">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b8">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
            <option value="b9">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
            <option value="b10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
          </select>
      </td>
    </tr>
    <tr>
      <td>
        <div class="wrapper">
            <div class="opt" id="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>            
            <div class="opt" id="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b3">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b4">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b5">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b6">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b7">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b8">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b9">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

【讨论】：

【解决方案4】：

我遇到了同样的问题。我为每个选项标签添加了以下样式以避免截断。

width: fit-content;

【讨论】：