Display Long Text in a new line outside HTML Table using jQuery

<div align="center">
    <table>
        <tr>
            <th>
                Content
            </th>
        </tr>
        <tr>
            <td class="wrap">
                Now my query is when any of the row of column value is beyond the width instead
                of showing in multiple lines entire text<span style="float: right;"><i class="fa fa-eye">
                </i></span>
            </td>
        </tr>
        <tr>
            <td class="wrap">
                I have a data table in MVC having 5columns with different column width<span style="float: right;">
                    <i class="fa fa-eye"></i></span>
            </td>
        </tr>
    </table>
</div>
<div id="dvContent" style="display: none;">
    <span id="content"></span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
    table
    {
        width: 200px;
        table-layout: fixed;
        text-align: left;
        vertical-align: top;
        padding: 5px;
    }
    td
    {
        white-space: nowrap;
        overflow: hidden;
    }
    td, th
    {
        border: 1px solid black;
    }
</style>
<script type="text/javascript">
    $(function () {
        $('.fa-eye').on('click', function () {
            var content = $(this).closest('td').text();
            $('#dvContent').show();
            $('#content').html(content);
        });
    });
</script>