word-break: break-word не работает в <select> элемент Internet explorer 10

word-break: break-word работает отлично во всех других браузерах, включая Internet Explorer. Но как только вы добавите его в элемент <SELECT></SELECT>.word-break: break-word не работает в <select> элемент Internet explorer 10

Вот пример, который работает во всех браузерах, кроме 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>

источник

2014-02-07 Steven Summone

Это особенность в IE: это просто делает каждый option элемент на одной линии. Изучив ситуацию в Инструментах разработчика, вы увидите, что ваши настройки распознаются (и унаследованы, если применимо, от select до option). Но рендеринг элемента select является особенным и не выполняет разрывов строк.

Вывод состоит в том, что вы не должны создавать такие проблемы. Элемент select предназначен для относительно коротких опций, и поведение IE вполне понятно. Либо значительно сократите текст option, либо используйте другой элемент управления, например набор переключателей.

источник

2014-02-07 11:30:33

Привет причиной большого выбора опций обусловлены параметры отчетов в моем приложении. Было бы здорово, если бы он работал в IE, а также в Firefox и Chrome. Должен быть какой-то взлом одного из вас, который может предложить CSS Guru. –

попробовать следующий код

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

источник

2014-02-07 11:39:19 Sarath

Привет, Сара, спасибо за это предложение. Я выстрелил и не работал. –

-1

Попробуйте использовать это:

word-wrap: break-word

источник

2015-03-16 13:01:44

word-break: break-word не работает в <select> элемент Internet explorer 10

ответ

Смежные вопросы