点击HTML选择截断文本（使用Google Chrome）

我正在尝试创建一个简单的select元素。点击HTML选择截断文本（使用Google Chrome）

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

我目前使用的代码是：

<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的等于编号' b的）：

enter image description here

有没有人知道如何在选择一个选项时修复截断？

来源

2015-07-19 Paz

问题是什么？ – Stickers

@Pangloss我编辑了这个问题（最后一行）。我希望现在更清楚。 – Paz

你测试过哪些浏览器？它不工作在哪里？你可以发布一个小提琴或其可重现的东西吗？您粘贴的代码正在为我工作，所以我认为问题在其他地方或不同于我使用的浏览器。 – dman2306

增加选择框的宽度。例如。

<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>

来源

2015-07-19 14:44:19 hyperkittie

我不知道宽度提前。 – Paz

这将是有用的派生宽度http://stackoverflow.com/questions/10585014/jquery-get-pixel-width-of-option-in-a-select-list – hyperkittie

我希望这可以在铬而不需要像jQuery这样的重型机器。 – Paz

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

您可以创建包装元素并将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属性而不是表格和td标签的属性：现在更多的批准了，但是您的方法很好，所以如果您恢复它，没有任何伤害。

来源

2015-07-19 15:03:04 jaunt

或者你也可以选择隐藏在DIV创建选择框：

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

table{ 
 
    border:0; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
select { 
 
\t width:320px; 
 
\t overflow:auto; 
 
} 
 
.wrapper{ 
 
    overflow:auto; 
 
    width:320px; 
 
    line-height:1.1em; 
 
    height:7.65em; 
 
} 
 
.opt { 
 
\t white-space:pre; 
 
\t width:auto; 
 
} 
 
.bg1 { 
 
\t 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>

来源

2015-07-19 17:35:14

点击HTML选择截断文本（使用Google Chrome）

回答

相关问题