搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

white-space:normal CSS not being applied in FireFox

  • 7 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 sun21170

more options

I have some CSS as below that is not getting applied in FireFox. In other browsers like Chrome, Opera and Edge it's getting applied without any issues. You can see a simple demo of this issue at following jsfidle: https://jsfiddle.net/sun21170/hw1zrbzm/3/

select option {

  white-space: normal !important;
}

My Firefox browser version is 57.0.1 (64-bit).

This makes one think that CSS does not work in FireFox like it's supposed to. The above CSS is always getting overriden by FireFox to white-space : nowrap.

I had also posted the issue in detail on stackoverflow at https://stackoverflow.com/questions/47621342/select-option-white-space-css-not-being-applied-in-firefox, but still waiting for satisfactory answer.

I have some CSS as below that is not getting applied in FireFox. In other browsers like Chrome, Opera and Edge it's getting applied without any issues. You can see a simple demo of this issue at following jsfidle: https://jsfiddle.net/sun21170/hw1zrbzm/3/ select option { white-space: normal !important; } My Firefox browser version is 57.0.1 (64-bit). This makes one think that CSS does not work in FireFox like it's supposed to. The above CSS is always getting overriden by FireFox to white-space : nowrap. I had also posted the issue in detail on stackoverflow at https://stackoverflow.com/questions/47621342/select-option-white-space-css-not-being-applied-in-firefox, but still waiting for satisfactory answer.

所有回复 (7)

more options

If you clean up your code as per the W3C ir will display in a 100 browsers and Google will rank it higher. Your CSS errors https://jigsaw.w3.org/css-validator/validator?uri=+https%3A%2F%2Fjsfiddle.net%2Fsun21170%2Fhw1zrbzm%2F3%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

HTML Errors https://validator.w3.org/nu/?doc=https%3A%2F%2Fjsfiddle.net%2Fsun21170%2Fhw1zrbzm%2F3%2F

Please let us know if this solved your issue or if need further assistance.

more options

Thanks for your response, but there was nothing in there that helps me. My jsfiddle is very simple and straightforward with one select element and a single CSS rule. The html being used is as below and is used with CSS style mentioned in the first post. There is nothing else in the page like other CSs files or script files being used.

<select size="6" name="ListBox1" id="ListBox1" style="width:100px;">
  <option value="Item 1 dsdds  sdsdsdsd sdsd sdsd sds xyz" title="Item 1 dsdds  sdsdsdsd sdsd sdsd sds xyz">Item 1 dsdds sdsdsdsd sdsd sdsd sds xyz</option>
  <option value="Item 2" title="Item 2">Item 2</option>
  <option value="Item 3 gfgf kgkgkg kgkkg abc" title="Item 3 gfgf kgkgkg kgkkg abc">Item 3 gfgf kgkgkg kgkkg abc</option>
  <option value="Item 4" title="Item 4">Item 4</option>
  <option value="Item 5" title="Item 5">Item 5</option>
  <option value="Item 6" title="Item 6">Item 6</option>
</select>

由cor-el于修改

more options

For what it's worth, IE11 also does not "wrap" the options.

Did it work before Firefox 48? Since Firefox became a multiprocess application, many style rules previously honored for option elements are ignored because they are not passed from the child (content) process to the parent (browser) process where some form controls are drawn. Although a small number of properties and values have been re-enabled, some others probably won't be. I have no idea about this one; it seems like an edge case to want to do this and I don't know if anyone has filed a bug for it.

https://bugzilla.mozilla.org/

more options

No, I never tried this in an older version of FireFox., since this is something I ran into a few days ago.

You can try out the simple page that reproduces this problem at Simple Page for this problem

more options

My question is: why do you want to display such long text in such a narrow control that provides so little formatting flexibility?

more options

jscher2000,

Thanks for pointing me to Bugzilla for bug reporting.

I have logged this as an issue in Bugzilla that you can see at Bug Logged

more options

jscher2000 said

My question is: why do you want to display such long text in such a narrow control that provides so little formatting flexibility?

jscher2000,

This was a simple case taken from a complex page that I was working on.

In the real page that I was working on, each listbox was having a width of 150px wide, which worked in 99.9% of situations except in some edge cases where the text was very long. Also, as per design requirements I was not allowed to increase the listbox width.

由sun21170于修改