Famous / engine

MIT License
1.75k stars 250 forks source link

Non-inherited properties not set on content div #433

Open jd-carroll opened 9 years ago

jd-carroll commented 9 years ago

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;]