I have been using text-align: justify to evenly distribute menus. Following this tutorial and it is working perfectly.

However, it breaks when I use ReactJS to create the view. A parison can be found here: /. I use these two simple ponents to populate the menus:

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return (<MenuItem title={menu.title} />);
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

After exploration, I think it is caused by ReactJS, which removes all line-break and white-space after <li> items. This will disable text-align: justify.

It happens for AngularJS as well (but I can fix it by using a add-space-all directive).

I reached only this issue after googling: . But I quickly got lost.

I tried to add some extra content, such as {'\n'} and {' '}, but ReactJS reports syntax errors.

Please help. Thanks.

UPDATE 1:

Following the accepted answer, my menus works in Chrome Emulator. However, when I visit from iPhone 5c (Chrome browser), the result is as if the extra space is not recognized.

After trying different binations, this one works:

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [(<MenuItem title={menu.title} />), '&nbsp; '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Please be noted that the extra space in   is necessary. Missing either   or breaks it.

It works then on Nexus 7, iPhone 5c (Chrome and Safari). However, I do not know the exact reason. If anyone knows, please help.

UPDATE 2:

Still buggy. So I switched to Flex layout. And it is super easy. An example is: /

I have been using text-align: justify to evenly distribute menus. Following this tutorial and it is working perfectly.

However, it breaks when I use ReactJS to create the view. A parison can be found here: http://jsfiddle/j7pLprza/1/. I use these two simple ponents to populate the menus:

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return (<MenuItem title={menu.title} />);
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

After exploration, I think it is caused by ReactJS, which removes all line-break and white-space after <li> items. This will disable text-align: justify.

It happens for AngularJS as well (but I can fix it by using a add-space-all directive).

I reached only this issue after googling: https://github./facebook/jsx/issues/19. But I quickly got lost.

I tried to add some extra content, such as {'\n'} and {' '}, but ReactJS reports syntax errors.

Please help. Thanks.

UPDATE 1:

Following the accepted answer, my menus works in Chrome Emulator. However, when I visit from iPhone 5c (Chrome browser), the result is as if the extra space is not recognized.

After trying different binations, this one works:

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [(<MenuItem title={menu.title} />), '&nbsp; '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Please be noted that the extra space in   is necessary. Missing either   or breaks it.

It works then on Nexus 7, iPhone 5c (Chrome and Safari). However, I do not know the exact reason. If anyone knows, please help.

UPDATE 2:

Still buggy. So I switched to Flex layout. And it is super easy. An example is: http://jsfiddle/j7pLprza/4/

• javascript
• css
• reactjs
• text-justify

• 1 React doesn't remove anything in this case, since there is no whitespace between elements in the first place. If you want to add whitespaces between the li elements, you can interleave the array with ' '. Example: jsfiddle/j7pLprza/2 – Felix Kling Commented Apr 16, 2015 at 9:59
• Thanks, @FelixKling. It works!. Please put it in the answer. – Joy Commented Apr 16, 2015 at 10:19
• I didn't answer because it's a bit annoying from an iPad. However, it turns out it works quite well with StackExchange app :) – Felix Kling Commented Apr 16, 2015 at 10:27
• @ShaojiangCai could you provide the solution you found with flex layout? – HelpMeStackOverflowMyOnlyHope Commented May 4, 2015 at 3:58
• 1 @HelpMeStackOverflowMyOnlyHope Please check it out: jsfiddle/j7pLprza/4 – Joy Commented May 4, 2015 at 6:02

1 Answer 1

React doesn't remove anything in this case, since there is no whitespace between elements in the first place. If you want to add whitespaces between the li elements, you can interleave the array with ' '. In this case it is as simple as returning an array from the .map function (arrays are flattened):

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [<MenuItem title={menu.title} />, ' '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Example: https://jsfiddle/j7pLprza/2