section 标签下的table宽度超出section 最大宽度

Question

用bootstrap做的表格，输入太长字符超过section的最大宽度

                       <section class='grid-table' style="width: 98%; height: auto;">
                            <table class='table table-condensed head-title'>
                                <thead>
                                    <tr>
                                        <th style='text-align: center; color:black;'> 事项名称 </th>
                                        <th style='text-align: center;color:black;'> 创建人员 </th>
                                        <th style='text-align: center;color:black;'> 回复 </th>
                                        <th style='text-align: center;color:black;'> 创建时间 </th>
                                    </tr>
                                    
                                </thead>
                                <tbody v-for="(index,item) in curdiscussList" >
                                    <tr v-if="index%2==0" class="grid-content" style="border-bottom: 1px solid lightgrey; background-color: #F5F5F5;">
                                        <td class="default-font" style="height:3rem; word-break:break-all;">
                                            <a href="#" style="color: black;" >
                                            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                            </a>
                                        </td>
                                        <td class="default-font" style="text-align: center;">
                                        a
                                        </td>
                                        <td class="default-font" style="text-align: center;">
                                        a
                                        </td>
                                        <td class="default-font"  style="text-align: center;">
                                        a
                                        </td>
                                    </tr>
                                    
                                    <tr v-else class="grid-content" style="border-bottom: 1px solid lightgrey;">
                                        <td class="default-font" style="height:3rem;">
                                            <a href="#" style="color: black;" >
                                            a
                                            </a>
                                        </td>
                                        <td class="default-font" style="text-align: center;">
                                        a
                                        </td>
                                        <td class="default-font" style="text-align: center;">
                                        a
                                        </td>
                                        <td class="default-font"  style="text-align: center;">
                                        a
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>

Answer 1

添加css属性break-word:all