HTML選擇剪切文本

Question

好的，像往常一樣，我把剩下的頭發拉出來，沒有在網上找到解決方法，這是我的最后選擇。

有一個簡單的表，其中包含一行和三個單元格。 在兩個單元格內是包含<select>和兩個按鈕的<select> （我喜歡外觀）。 一切看起來都與我想要的一樣，只是選項的文本被截斷了。

我嘗試過調整選擇的大小，但是找不到有關調整選項本身大小的任何參考。

我究竟做錯了什么？

HTML：

 <div id='tabs-1' style='width: 95%;'> <table style='width: 98%; margin-left: auto; margin-right: auto;'> <tr> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Manual</legend> <br> <div style='text-align: center;'> <a href="#" onclick='getPage("SheriffManual")' target="_self"> <img src="images/manualIcon.jpg" alt='Manual' height="65"> <br> Sheriff's Policy and Procedure </a> </div> </fieldset> </td> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Memorandum</legend> <br> <div style='width: 100%;" text-align: center;'> <select style='width: 90%;' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value=""> <option value='memorandum/MINIMUM APPLICANT STANDARDS FOR DETENTION, PEACE OFFICERS AND TELECOMMUN.pdf'>Minumum Applicant Standards</option> <option value='memorandum/Memorandum EMPLOYEE SMOKING AREAS.pdf'>Employee Smoking Areas</option> </select> <br><br> <div style='float: left; margin-left: 75px;'> <button>View</button> </div> <div style='float: right; margin-right: 75px;'> <button>Download</button> </div> </div> </fieldset> </td> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Directives</legend> <br> <select size='8' style='width: 90%' id='selSheriffDirectives' name='selSheriffDirectives' value=''> <option value='directives/SHERIFFS DIRECTIVE NO 2015-09-01 WORK PLACE VIOLENCE.pdf'>Workplace Violence</option> <option value='directives/Directive ANNUAL TUBERCULOSIS SCREENING.pdf'>Annual Tuberculosis Screening</option> <option value='directives/Sheriffs Directive No. 02-03 - Bereavement Leave.pdf'>Bereavement Leave</option> <option value='directives/SHERIFFS DIRECTIVE Mental Health Pre-Screening and Diversion NO 2015-01.pdf'>Mental Health Pre-Screening</option> </select> <br><br> <div style='float: left; margin-left: 75px;'> <button>View</button> </div> <div style='float: right; margin-right: 75px;'> <button>Download</button> </div> </fieldset> </td> </tr> </table> </div> 

結果：

更新：我取出了頁面的所有CSS和javascript，並且select呈現了預期的效果。 將所有內容放回去之后，我意識到是導致問題的jquery.ui.js －我正在使用jquery的選項卡，並且將<select>選項寬度設置為與選項卡寬度相同。 現在，我只需要找出我需要/如何重寫jquery。

Answer 1

如何在您的選擇元素中添加滾動條？

<select style='width: 90%; overflow: scroll' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
...
</select>

Answer 2

更改<option>的height或padding

option {
    height:8px;
    padding:8px;
}

Answer 3

事實證明，有一個簡單的解決方法（ 當通過IE 9中准備好的文檔中的javascript更改正文字體大小時 ， 選擇框會截斷文本 ）：

$('select').append(' ');

強制重選選擇。