index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
    <title>React Truncate Text Demo</title>
    <style type="text/css">
        #sample-12 .address {
            display: flex;
            width: calc((100% - 388px) / 2 - 48px);
            margin: 24px;
            font-family: 'AvenirNext-Medium';
            font-size: 14px;
            color: var(--main-text);
            justify-content: center;
        }

       #sample-12  .container {
            display: flex;
            flex: 1;
            flex-direction: column;
            height: 100%;
            position: relative;
            overflow-y: scroll;
            background-color: var(--background)
        }

       #sample-13 .container {
            display: flex;
       }
    </style>
</head>

<body>
    <a href='https://github.com/ShinyChang/React-Text-Truncate'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png'></a>
    <div class='container'>
        <h1>React Truncate Text</h1>
        <div class="page-header">
            <h3>Property</h3>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Property Name</th>
                    <th>Type</th>
                    <th>Default</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>text</td>
                    <td>string</td>
                    <td>''</td>
                </tr>
                <tr>
                    <td>truncateText</td>
                    <td>string</td>
                    <td>'…'</td>
                </tr>
                <tr>
                    <td>line</td>
                    <td>number</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>textTruncateChild</td>
                    <td>node</td>
                    <td>undefined</td>
                </tr>
                <tr>
                    <td>containerClassName</td>
                    <td>string</td>
                    <td>undefined</td>
                </tr>
            </tbody>
        </table>
        <div class="page-header">
            <h3>Demo</h3>
        </div>
        <div id='root'></div>
    </div>
    <footer style='text-align: center; margin-top: 30px; padding-top: 20px; padding-bottom: 20px;background-color: #333;'>
        <iframe src="https://ghbtns.com/github-btn.html?user=ShinyChang&repo=React-Text-Truncate&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
    </footer>

    <script src='//code.jquery.com/jquery.min.js'></script>
    <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src='//fb.me/react-0.14.0.js'></script>
    <script src='//fb.me/react-dom-0.14.0.js'></script>
    <script src='build/bundle.js'></script>
</body>

</html>