前端-表格英文单词不换行问题

╰+哭是因爲堅強的太久メ 2022-05-16 08:48 240阅读 0赞

当表格内容是英文单词时，默认不会换行  
![这里写图片描述][70]  
解决方法：给table设置**table-layout: fixed;** table下的td设置**word-wrap: break-word;**

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>内容换行问题</title>
            <style> table { border-collapse: collapse; table-layout: fixed; width: 310px; } table td { border: solid 1px #fab; width: 100px; word-wrap: break-word; } </style>
        </head>
    
        <body>
            <table>
                <tr>
                    <td>1</td>
                    <td>Lorem Ipsum</td>
                    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
                    <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td></td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
                </tr>
            </table>
        </body>
    
    </html>

效果  
![这里写图片描述][70 1]  
解决.

[70]: /images/20220516/dcc2bfe5d5a847f6843fb0ad200e123a.png
[70 1]: /images/20220516/a637264f68ba41f29e18a7b737973cbb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 layer.tips换行问题(解决layui tips连续英文和数字不换行问题)

jsp>style里添加: .layui-layer-tips { word-break: break-all; } tip

朱雀/ 2023年10月18日 14:17/ 0 赞/ 82 阅读

相关前端学习-英文单词总结

英语单词中文注解 string 字符串 boolean 布尔 node 节点 log 日志，记录 console 控制台 alert 警报、警告

女爷i/ 2022年12月16日 09:23/ 0 赞/ 182 阅读

相关英文字符自动换行(防止表格撑坏)方法

<table width="100%" border="0" style="word-break:break-all; table-layout: fixed;border-

迷南。/ 2022年08月27日 09:50/ 0 赞/ 136 阅读

相关 Layui数据表格换行

1.添加<br> 2.添加样式 .layui-table-cell { height: auto; } 效果如下： ![70][] [70

小咪咪/ 2022年05月20日 09:07/ 0 赞/ 306 阅读

相关 textView英文自动换行

public class XRTextView extends TextView { private boolean mEnabled = true;

我不是女神ヾ/ 2022年05月20日 08:24/ 0 赞/ 235 阅读

相关前端-表格英文单词不换行问题

当表格内容是英文单词时，默认不会换行 ![这里写图片描述][70] 解决方法：给table设置table-layout: fixed; table下的td设置word-

╰+哭是因爲堅強的太久メ/ 2022年05月16日 08:48/ 0 赞/ 241 阅读

相关 layer表格汉字不换行解决办法

<style type="text/css"> .layui-table-cell { height: auto;

青旅半醒/ 2022年02月27日 00:58/ 0 赞/ 431 阅读

相关 html表格自动换行

一、方法简介用表格做网页排版的时候，一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象：（总结了一下，只要在CSS中定义了

你的名字/ 2021年12月18日 23:11/ 0 赞/ 542 阅读

相关 CSS强制英文、中文换行与不换行强制英文换行

1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为

分手后的思念是犯贱/ 2021年09月12日 08:40/ 0 赞/ 470 阅读

相关溢出英文不换行

　　英文溢出不换行而中文溢出会换行，因为中文一个字就是一个字符浏览器知道有多少个字符，而英文字母浏览器不知道整体是一个单词还是由许多单词组成，就统一当成一个单词处理所有就...

朱雀/ 2021年01月27日 06:14/ 0 赞/ 608 阅读