I have a blog where I present alot of syntax, but the code inside the code tag won’t break/wrap when resizing.
How do I style the code or should I style the .syntax-line-wrap > span.value element?

For demo, go to:
https://blog.sltech.no/Stein/Article/1

Cshtml:

<pre>
    <code>
        <div class="syntax">
            <table>
                @foreach (ICodeLineModel line in code.Lines)
                {   
                    <tr>
                        <td class="line-nr-wrap"><span class="nr">@line.LineNumber</span></td>
                        <td class="syntax-line-wrap"><span class="value">@Html.Raw(line.Syntax.HtmlEncode())</span></td>
                    </tr>
                }
            </table>
        </div>
    </code>
</pre>

Sass/CSS:

pre {
    $mrg: 8px;

    display: block;
    margin-top: $mrg;
    margin-bottom: $mrg;
    font-family: calibri, Arial, sans-serif;
    font-size: 14px;
    padding: 9px;
    overflow: scroll;

    & > code {
        overflow: scroll;

        & > div.syntax {
            & > table {
                & td {
                    &.line-nr-wrap {
                        width: 33px;
                        vertical-align: middle;

                        & > span.nr {
                            font-size: 11px;
                            font-weight: bold;
                        }
                    }

                    &.syntax-line-wrap {
                        & > span.value {
                            line-break: loose;
                        }
                    }
                }
            }
        }
    }
}