點擊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）

回答

相關問題