Html 行距随表格中的移动大小和文本而关闭。我需要允许单词断字和紧排，以防止单词互相压碎

我有我做的这个网站

这很好，但是当你缩小浏览器以移动方式查看或使用谷歌的移动模拟器时，文本不会通过添加新行来包装，而是将长句包装起来

下面是HTML的一个片段

                    <div class="col-lg-7 ml-3">
                        <h3 class="font-weight-bold">Kayla Perkins | Resume</h3>
                        <p>Click to <a href="content/kayla-perkins-resume-2020.pdf" target="_blank">download my resume</a>.  Click to expand sections of my online resume.</p>
                        <hr>
                        <div class="accordion" id="accordionExample">
                            <div class="card">
                                <div class="card-header cardheader" id="headingOne">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <span class="tabs">Film work</span>
                                        </button>
                                    </h2>
                                </div>

                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">
                                        <table class="resumetable">
                                            <tbody class="resbody">
                                                <tr class="resumeborder">
                                                    <th><strong>Film</strong></th>
                                                    <th><strong>Role</strong></th>
                                                    <th><strong>Production</strong></th>
                                                </tr>
                                                <tr>
                                                    <td class="clear-fix">&nbsp;&nbsp;&nbsp;</td>
                                                    <td class="clear-fix">&nbsp;&nbsp;&nbsp;</td>
                                                    <td class="clear-fix">&nbsp;&nbsp;&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td class="resumecol1 resumecolgeneral">
                                                        <br><br>
                                                        <p>A Promise to Alexis</p>
                                                    </td>
                                                    <td class="resumecol2 resumecolgeneral">
                                                        <br><br>
                                                        <p>Lead</p>
                                                    </td>
                                                    <td class="resumecol3 resumecolgeneral">
                                                        <br><br>
                                                        <p>Christopher Siaens Films</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="resumecol1">
                                                        <p>Weekend Cabin</p>
                                                    </td>
                                                    <td class="resumecol2">
                                                        <p>Lead</p>
                                                    </td>
                                                    <td class="resumecol3">
                                                        <br><br>
                                                        <p>Magnum Caliber Films</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="resumecol1">
                                                        <p>Maura The Vampire Princess</p>
                                                    </td>
                                                    <td class="resumecol2">
                                                        <p>Lead</p>
                                                    </td>
                                                    <td class="resumecol3">
                                                        <br><br>
                                                        <p>Magnum Caliber Films</p>
                                                    </td>
                                                </tr>

我添加了一个整体的CSS样式，但当然，这些都不起作用

.resumecolgeneral {
    word-break: break-all;
    word-break: break-word;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    line-break: loose;
    line-break: strict;
    text-wrap: balance;
}

我知道这是一张桌子，但换成div会有帮助吗？在这种情况下使用表只是一个想法

以下是两个案例的图片：

桌面

流动的

---

谢谢你能检查一下下面的代码吗？希望它对你有用。 在

.resbody

中，您已给出

行高：2px所以把长句包起来，你需要设置
行高：20px
并删除您在
中添加的未使用的

标记

所以我完全照你说的做了。没有快乐！啊！我错了！我完全照你说的做了。它起作用了！我们很高兴，我们的解决方案帮助您。。。
.resumecolgeneral {
    word-break: break-all;
    word-break: break-word;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    line-break: loose;
    line-break: strict;
    text-wrap: balance;
}

.resbody {
    line-height: 20px;
}