td内容自动换行，table表格td设置宽度后文字太多自动换行_F11

分享到

td内容自动换行，table表格td设置宽度后文字太多自动换行

HTML/Xhtml 来源：互联网作者：佚名发布时间：2023-01-01 19:55:07 人浏览

摘要

设置table 的 style=table-layout:fixed; 然后设置td的 style=word-wrap:break-word; 即可但这种情况下表格宽度自由分配，所以如果不用设置table 的 style=table-layout:fixed;直接使用下面的代码也可以实现换

设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可

但这种情况下表格宽度自由分配，所以如果不用设置table 的 style="table-layout:fixed;"直接使用下面的代码也可以实现换行

word-wrap:break-word;word-break:break-all;

案例

<tbody>

<tr>

<td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>

<td>aaaaa</td>

</tr>

<tr>

<td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>

<td>aaaaa</td>

</tr>

</tbody>

</table>

例子二

<tbody>

<tr>

<td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>

<td>aaaaa</td>

</tr>

<tr>

<td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>

<td>aaaaa</td>

</tr>

</tbody>

</table>

比较好的写法

#soft-intro table{border:1px solid #cccccc; border-collapse:collapse; text-align:center; margin-top:0.54em; clear:both;width: 100%;}

#soft-intro table th,#soft-intro table td{padding:8px; border:1px solid #dddddd;line-height:22px; text-align:left}

#soft-intro table th{background:#f9f9f9;}

#soft-intro table thead, #soft-intro table.jbborder tr {background-color:#fff;}

#soft-intro table tr:nth-child(even){background-color:#f9f9f9}

#soft-intro table tbody tr:hover {background: rgba(255,255,153,.4)}

#soft-intro table th img{display:block; margin:5px auto 0;}

#soft-intro table td{text-align:left;word-wrap:break-word;word-break:break-all;}

#soft-intro table td.version{font-weight:bold;}

#soft-intro table pre{width:auto;margin:0;padding:0;border:0;background:transparent}

#soft-intro table td p{margin:0; padding:0;line-height:22px;word-wrap:break-word;word-break:break-all;}

#soft-intro table ul{margin-top:2px;}

您可能感兴趣的文章 :

原文链接 :

Tag : 表格(8)table(11)

HTML点击按钮button跳转页面的四种方法介绍

其实我比较喜欢第一种方法 1 button onclick=window.location.href=../routeEdit/index.html type=button id=add新增/button 正文方法一：在button标签中加上onclick属
td内容自动换行，table表格td设置宽度后文字太多

设置table 的 style=table-layout:fixed; 然后设置td的 style=word-wrap:break-word; 即可但这种情况下表格宽度自由分配，所以如果不用设置table 的 style=t
HTML静态页面获取url参数和UserAgent的实现代码

接技术支持小伙伴信：有用户反馈app在华为设备上下载不了，以为是服务器覆盖的范围不够或服务器挂了，直到另一个客服同事发来一个录
html网页引入svg图片的4种方式总结

web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
html中两种获取标签内的值的方法介绍

获取标签中value的值使用的javascript获取，所以肯定是包含在 script 标签里的，也需要引入jquery 标签示例： 1 input id=goodsCount type=text size=2 re
HTML基本元素标签介绍

一、什么是HTML HTML（Hypertext Markup Language）：即超文本标记语言，是一种用来设计网页的标记语言，用该语言编写的文件，以.html或.htm为后缀
HTML中的表格元素介绍

表格元素的作用：用来格式化显示数据。一、表格的基本结构表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
HTML中的表单元素介绍

表单元素概述表单（Form），用于收集用户信息、提交用户请求等处理过程 1、设计表单，并放入一些输入域 2、网站访问者在自己的计算机
HTML怎么设置下划线？html文字加下划线方法

HTML中的下划线曾经是将文本包含在u/u标签中的问题，但是这种方法已被放弃，而更倾向于使用更多功能的CSS。一般来说，下划线被认为是引
关于HTML编码导致的乱码问题介绍

今天一个学弟问了一个问题，它写的HTML代码打开显示的是乱码。然后就给我发来了代码。就一个HTML文件和一个文件夹，打开一看，很简单