Question

word-break：在包括Internet Explorer在内的所有其他浏览器中，break-word工作正常。但只要将其添加到<SELECT></SELECT>元素中即可。

以下示例适用于除IE之外的所有浏览器。

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p.test, select
      {
        width:100px; 
        border:1px solid #000000;
        -ms-word-break: break-all; /* wraps the text in the selector so it prints properly*/
            word-break: break-all;
            /* Non standard for webkit */
            word-break: break-word;
       -webkit-hyphens: auto;
          -moz-hyphens: auto;
           -ms-hyphens: auto;
               hyphens: auto;
           white-space: pre-wrap;
        border: 1px dotted red;
      }
    </style>
  </head>
  <body>
    <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
    <select class="test">
      <option>testshr1</option>
      <option>tb details</option>
      <option>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</option>
      <option>test</option>
    </select>
  </body>
</html>

Answer 1

这是IE中的一项功能：它只是在一行上呈现每个option元素。查看开发人员工具中的情况，您可以看到您的设置已被识别（并在适用时从select继承到option）。但是select元素的呈现是特殊的，并且不会进行换行。

结论是你不应该制造这样的问题。 select元素用于相对较短的选项，IE行为是可以理解的。要么大大缩短option文本，要么使用不同的控件，比如一组单选按钮。

Answer 2

尝试以下代码

<style>
select option{
            width:100px; 
            word-break: break-all;
    }
</style>

Answer 3

尝试使用：

word-wrap: break-word

word-break：break-word在<select>元素Internet Explorer 10 </select>中不起作用

3 个答案: