Non-inherited properties not set on content div
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 249
- PR merge metrics
- No merged PRs in 30d
Description
Properties with a default inherit of `none` are not available on the inner text-content `div`.
Thus the following will not apply an ellipsis:
```
'use strict';
var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Size = require('famous/core/Size');
FamousEngine.init();
var logo = FamousEngine.createScene().addChild();
var domLogo = new DOMElement(logo, {
properties: {
'background-color': '#49afeb',
'white-space': 'nowrap',
'text-overflow': 'ellipsis'
}
});
domLogo.setContent('The quick brown fox jumps over the lazy dog, the quick brown fox jumps over the lazy dog');
logo
.setSizeMode(Size.ABSOLUTE, Size.ABSOLUTE)
.setAbsoluteSize(100, 100)
.setAlign(0.5, 0.5)
.setMountPoint(0.5, 0.5)
.setOrigin(0.5, 0.5);
```
The context in which I observed this issue was trying to get the text to display an ellipsis after a multi-line wrap (which didn't work). So in this particular case, this may not be such an issue because I will have to manually inspect the length of the String and then trim the size to the proper length.
Not sure if people will run into this condition otherwise.
[`text-overflow` does not work with out the `white-space: nowrap;`]
Contributor guide
Assessment
This issue has not been assessed yet.