word-break在chrome中显示超出列宽

最新推荐文章于 2023-05-12 11:38:12 发布
原创 最新推荐文章于 2023-05-12 11:38:12 发布 · 314 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文介绍了一种解决表格列内容过多导致布局错乱的方法，通过使用CSS的word-break属性和定义宽度，使得超出宽度的内容能够自动换行，从而保持表格整体布局的美观。 
<div style="width:600px;text-align:left;word-break:break-all;"></div>

我把他们添加到一个table中的一列，

刚开始没有添加word-break：

出现了chrome浏览器中，因为这一列内容很多，导致挤得其他列都很窄很窄、

所以就用了上面的word-break属性，并且定义了宽度，这样，如果内容超出了宽度，这列内容就会换行了。

CSS自动换行
02-02
在前端开发领域，尤其是网页布局设计中，自动换行是一个至关重要的功能，它能够确保文本在不同的屏幕尺寸或容器宽度下能够自适应地显示，避免文本溢出或排版错乱的问题。本文将深入探讨五种不同的自动换行策略，这些...
Chrome 浏览器 Bug 组合使用样式 word-break: break-word；white-space: pre-wrap； 在浏览器宽度发生变化时，浏览器界面卡死
ArturiaTop的博客
05-17 324
当组合使用样式 word-break: break-word;时，如果呈现的文字宽度在换行的临界点并且页面样式比较复杂时。Chrome(113.0.5672.93) 浏览器会发生卡死情况。
chrom中文换行word-break:break-all不生效解决办法
Tidecony的博客
01-11 5908
今天有朋友找我说是文字换行出现了问题，新行起始为标点符号的话，总会把第一行最后一个字给带下去，搞的很不美观，像这种常见的文字排版问题当然是教他怎么粗暴解决了， 什么加宽，减宽，调文字间距，上下错两个字洒洒水啦，奈何他们公司UI异常强硬，要求他连文字间距都不能改，第二行是引号开头，就是引号开头，没得商量，遇到这种问题当然是先吐槽一顿了，然后就开始想办法，各种word-wrap，word-break，
不同浏览器下word-wrap和word-break强制换行
john2522的专栏
11-05 6404
强制换行与强制不换行用到的属性         我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地： word-wrap语法：         word-wrap: normal(默认) | break-word         各个浏览器
HTML表中的自动换行
asdfgh0077的博客
01-12 2327
我一直在使用word-wrap: break-word将文本div和span 。 但是，它似乎在表单元格中不起作用。 我有一个表设置为width:100% ，有一行和两列。 列中的文本尽管使
table td超出给定宽度，显示点点点...，table td超出给定宽度换行，解决方法
张梦兰的博客
08-20 3210
表格宽度确定后，要长度过长则首先需要固定表格  table-layout:fixed  所有浏览器都支持 table-layout 属性 也就是定位列宽由表格宽度和列宽度设定。需要了解具体可以参考w3cschool 接下来就要实现问题解决方法了 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta ch...
关于 wkhtmltopdf，你一定想知道这些
weixin_34268579的博客
09-13 1696
前言 如果你有 Markdown 或者 HTML 转到 PDF 的需求, 有非常大的可能你选了一圈方案, 最后找到了大名鼎鼎的wkhtmltopdf. 但找到它之后并没有解决所有问题, 相反, 它会带来更多的问题. 首先说一下它的优点: 由于是基于 WebKit, 所以渲染结果和 Chrome( 包括其他基于 Chromium的浏览器几乎完全一致) 可以和前端公用一套 CSS 样式, 结果还是体...
table中内容过长，table改变的问题
weixin_30861459的博客
01-08 295
在看效果时发现在Chrome中的table已经不是原来设置的宽度了，而其他浏览器是好的，经过百度发现是单元格内容过多造成的，但这时候给td设置宽度已经不适用了，此时就要给table设置 table{table-layout:fixed;} table-layout属性 用法：作用于table标签，显示单元格列宽的计算法则。 取值：auto（默认）列宽由内容确定。加载慢 fi...
详细前端面试题CSS篇--持续更新
jyl919221lc的博客
05-12 2868
margin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度如何开启不同盒子模型标准盒子模型IE盒子模型Grid。
display: table; table-layout: fixed; border-collapse: collapse; overflow-x: auto; word-break: keep-all; border: 2rpx solid #EEF0F5;.
09-19
在Firefox、Chrome、Safari等现代浏览器中均支持。 6. `border: 2rpx solid #EEF0F5;`：注意`rpx`单位是微信小程序中专用的，在Web开发中应该使用`px`、`em`、`rem`等单位。如果在Web中使用`rpx`，需要转换（如使用...
【Layui表格动态列宽】：自适应内容调整的6个技巧
文章还深入探讨了高级技巧，如列宽与媒体查询的结合、复杂表格列宽处理及CSS3的flexbox布局在列宽调整中的应用。最后，本文分析了Layui表格动态列宽的兼容性问题，并提供调试与性能优化策略。通过创新应用案例，展示...
<table style=" border: 1px solid black; border-collapse: collapse; width: 50mm; height: 30mm; table-layout: fixed; box-sizing: border-box; font-size: 12px; "> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 1px; width: 8.89%;">资产编码:</td> <td style="padding: 1px; width: 8.89%; overflow: hidden; text-overflow: ellipsis;">$zcbm$</td> <td rowspan="3" style=" border: 1px solid black; vertical-align: middle; text-align: center; width: 71.12%; padding: 0; height: 10mm; overflow: hidden; "> <div style=" max-width: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto; overflow: hidden; "> #QRCodeImg# </div> </td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">资产名称:</td> <td style="padding: 1px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$zcmc$</td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">使用部门:</td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$sybm$</td> </tr> <tr style="border: 1px solid black; height: 20mm;"> <td style="border: 1px solid black; padding: 2px; width: 8.89%;">启用日期:</td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis; width: 8.89%;">$date$</td> <td style="visibility: hidden;"></td> </tr> </table>资产名称没有完全显示
10-10
我们之前已经将表格设置为固定尺寸（50mm×30mm），并且通过固定布局和盒模型调整确保整体尺寸符合要求。现在用户反馈资产名称未完全...> 实际测试：在Chrome打印预览中（缩放100%），可完整显示15个汉字或25个英文字符
<table class="w-full border-collapse"> <!-- 表头 --> <thead> <tr class="bg-gray-100"> <th colspan="6" class="py-3 px-4 border border-gray-300 font-bold text-gray-800 text-center whitespace-nowrap" > 肉类 </th> <th colspan="6" class="py-3 px-4 border border-gray-300 font-bold text-gray-800 text-center whitespace-nowrap" > 海鲜类 </th> <th colspan="6" class="py-3 px-4 border border-gray-300 font-bold text-gray-800 text-center whitespace-nowrap" > 蔬菜类 </th> <th colspan="6" class="py-3 px-4 border border-gray-300 font-bold text-gray-800 text-center whitespace-nowrap" > 干货类 </th> </tr> <tr class="bg-gray-50 whitespace-nowrap"> <!-- 肉类子表头 --> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <!-- 海鲜类子表头 --> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <!-- 蔬菜类子表头 --> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <!-- 干货类子表头 --> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 编号 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 物品名 </th> <th class="py-2 px-3 border border-gray-300 text-center text-sm font-semibold text-gray-700" > 数量 </th> </tr> </thead> <!-- 表格内容 --> <tbody> <tr v-for="(row, rowIndex) in displayedItems" :key="rowIndex" class="hover:bg-gray-50 transition-colors duration-150 whitespace-nowrap" > <!-- 肉类数据 --> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.meat1?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.meat1 ? getSupplierColorStyle(row.meat1.supplierId) : {} " > {{ row.meat1?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.meat1?.quantity || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.meat2?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.meat2 ? getSupplierColorStyle(row.meat2.supplierId) : {} " > {{ row.meat2?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.meat2?.quantity || "" }} </td> <!-- 海鲜类数据 --> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.seafood1?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.seafood1 ? getSupplierColorStyle(row.seafood1.supplierId) : {} " > {{ row.seafood1?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.seafood1?.quantity || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.seafood2?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.seafood2 ? getSupplierColorStyle(row.seafood2.supplierId) : {} " > {{ row.seafood2?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.seafood2?.quantity || "" }} </td> <!-- 蔬菜类数据 --> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.vegetable1?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.vegetable1 ? getSupplierColorStyle(row.vegetable1.supplierId) : {} " > {{ row.vegetable1?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.vegetable1?.quantity || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.vegetable2?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style=" row.vegetable2 ? getSupplierColorStyle(row.vegetable2.supplierId) : {} " > {{ row.vegetable2?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.vegetable2?.quantity || "" }} </td> <!-- 干货类数据 --> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.dry1?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style="row.dry1 ? getSupplierColorStyle(row.dry1.supplierId) : {}" > {{ row.dry1?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.dry1?.quantity || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.dry2?.code || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800" :style="row.dry2 ? getSupplierColorStyle(row.dry2.supplierId) : {}" > {{ row.dry2?.name || "" }} </td> <td class="py-2 px-3 border border-gray-300 text-sm text-gray-800 text-center" > {{ row.dry2?.quantity || "" }} </td> </tr> <!-- 空状态 --> <tr v-if="displayedItems.length === 0"> <td colspan="24" class="py-8 text-center text-gray-500 border border-gray-300" > 暂无数据 </td> </tr> </tbody> </table>大小自适应
最新发布
10-23
由于在scoped样式中，我们可能需要使用深度选择器来修改子组件的样式（如果表格在子组件中），但这里表格在同一个组件。 下面是一个完整的样式示例： </think># 复杂表格自适应布局解决方案 您的表格结构非常...
IDEA中maven没有了
热门推荐
勇气与行动
11-02 1万+
安装Maven： Settings - Plugins - Maven Integration 勾选这两项即可
IDEA 查看tomcat的日志
勇气与行动
11-02 1万+
C:\Users\67534\.IntelliJIdea2016.1\system\tomcat\Unnamed_community-parent_2\logs\community-sv
Java抽象类和接口中可以有成员变量吗？
勇气与行动
11-21 1万+
public class AbstractTest { public static void main(String[] args) { CC cc = new CC(); System.out.println(cc.b); System.out.println(cc.getA()); } } abstract class AA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值