'.form-group row' and multi language
- Operating system and version: macOS.
- Browser and version: Google Chrome 84.0.4147.89 (64 bits) and Firefox 78.0.2 (64 bits).
- [Reduced test case](https://codepen.io/julien-deramond/pen/MWKZybb)
- [Related issue in Boosted](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/444)
In a .form-group row
, the <label>
s (most of the time) will be on the left part of the form.
Considering a multi language website, we can't control what text will be in those <label>
s.
So we can be confronted to cases where the <label>
s contain words very long in some languages; and we must add something like a .text-break
class to handle it:
.text-break {
word-wrap: break-word;
}
Because it's everywhere in our website, it seems that we have 2 choices:
- Change the global rule of
.form-group row
to automatically add the equivalent of the.text-break
content. - Add a
.text-break
everywhere manually.
Wouldn't be possible to automatically add the equivalent of .text-break
for the .form-group row
s directly in Bootstrap or is it dumb?
The same thing is happening with .form-control-plaintext
. Because we're not in control of what the user will enter, why not using automatically something like a .text-ellipsis
:
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
Moreover, it worked in Bootstrap 3 with .form-control.static
(probably because it wasn't a readonly <input>
).