Select wrap bug

[dotdub]

Building an internal database interface and came across a word-wrap bug for certain select options that are large. Only appears to be an issue with Safari/Chrome. Using v4.0-beta.

This is the code the wsgi/Jinja app puts out, the profiler is a little too long and Safari wraps the 'r'

<select name="type" class="form-control">
  <option value="1">Aquadopp Meter</option>
  <option value="2" selected="">Aquadopp Profiler</option>
  <option value="3">RDI Long Ranger</option>
  <option value="4">RDI Sentinel</option>
</select>

I am able to fix it live by adding word-wrap: normal; to the .form-control class.

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[dotdub]

Apologies for missing that. Here is a simplified CodePen for the issue. Only appears (for me) in Safari 11.02 using macOS 10.12.6. Firefox & Chrome wrap the text properly.

https://codepen.io/dotdub/pen/qpEJmj?editors=1000#0

[mdo]

This is coming from the .card—it has word-wrap: break-word;. Will need to revisit that.

[dotdub]

I identified that as the problem as well. I've addressed it temporarily with an in-page fix. I'll watch for the fix.