Table data overflowing past container

Question

When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?

Here is an image of what is going on: https://i.sstatic.net/Bo1dO.jpg

Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/

<div class="container">
    <div class="row tab-content">
        <div class="row">
            <h3>Assigned Games</h3>
            <p>Please enter a search string in the textbox to search for users</p>

            <form class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
                </div>
            </form>
           <div class="table">
                <table id="userTable" class="table">
                    <thead>
                        <tr>
                            <th>UserName</th>
                            <th>Alternate</th>
                            <th>Email</th>
                            <th>Assigned Games</th>
                            <th>Unassigned Games</th>
                       </tr>
                    </thead>
                    <tbody>
                        @foreach (var user in Model)
                        {
                            <tr>
                                <td>@Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { @class = "modal-link" })</td>
                                <td>
                                    @user.AlternateId
                                </td>

                                <td>@user.Email</td>
                                <td>
                                    @if (user.Assigned.Any())
                                    {
                                        <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
                                           data-content="@foreach (var gameName in user.Assigned){<div>@gameName</div>}">
                                            @user.Assigned.Count</a>
                                    }
                                    else
                                    {
                                        <div class="text-warning">0</div>
                                    }
                                </td>
                                <td>
                                    @if (user.Unassigned.Any())
                                    {
                                        <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
                                           data-content="@foreach (var gameName in user.Unassigned) {<div>@gameName</div>}">
                                        @user.Unassigned.Count</a>
                                    }
                                    else
                                    {
                                        <div class="text-warning">0</div>
                                    }
                                </td>

                            </tr>
                        }

                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

This is you need:

<style>
td
{
 word-break: normal;
}
</style>

Answer 2

You need to break up the long word.

 <td style="word-break:break-all">