我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼。其实解决这个问题很简单,只要在<td>的样式中加入word-break: break-all(强制换行),就会使那些不听话的文本自动回行。是我刚刚学到的,一起分享~~~

一起看看吧:

没有使用word-break之前:

   <table width="300" border="1">      <tr>       <td width="100px">测试内容:</td>       <td width="200px">asjdhfajshdflkasdhfajslhdfalsjdhfajklhjfdaljfdhajsdhfjashfieyruqeqyuiroqwytxcbvmbzxmc,vxzmvb</td>      </tr>     </table>

使用word-break之后:

<table width="300" border="1">      <tr>       <td width="100px">测试内容:</td>       <td width="200px" style="word-break:break-all">asjdhfajshdflkasdhfajslhdfalsjdhfajklhjfdaljfdhajsdhfjashfieyruqeqyuiroqwytxcbvmbzxmc,vxzmvb</td>      </tr>     </table>

试试看吧,结果孑然不同:)

[HTML]不让TD中的文本撑开表格(转)的更多相关文章

  1. Table里td中的文本过长,设置不换行,随内容同行显示(转载)

    当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap   就可以解决排版问题啦 <td style="white ...

  2. Java 读取Word文本框中的文本/图片/表格

    Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...

  3. 用python解析pdf中的文本与表格【pdfplumber的安装与使用】

    我们接触到的很多文档资料都是以pdf格式存在的,比如:论文,技术文档,标准文件,书籍等.pdf格式使得用机器从中提取信息格外困难. 为了解决这个问题,我找到了几种解决方案,最后选择了python上的p ...

  4. 如何控制table中td内的文本位置

    默认为左中效果    td中垂直用valign 取值为:top/middle/bottom/baseline,水平用align 取值为:left,center,right;

  5. Html中的文本框和单选按钮

    Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  6. s:textarea中的文本内容在什么时候才能被赋值给Action中的属性?

    下面是jsp程序片段: <s:form id="startForm" name ="startForm" action="/hall/hall_ ...

  7. td中绝对定位div的垂直居中问题

    一.需求 典型的注册页面设计一般是一个三列多行的表格,左列为表单项label,中列为文本框,右列为填写说明和验证提示.如下图 因为整个表单的视觉重心在左中两列,所以在考虑表单整体相对页面水平居中和注册 ...

  8. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  9. td中的值自动换行

    设置td中的值自动换行在<td ></td> 中加上这样一句代码,可以简省设置,使长字符串换行.而不用设置width,height. style="word-wrap ...

随机推荐

  1. javascript反混淆之packed混淆(二)

    上次我们简单的入门下怎么使用html破解packed的混淆,下面看一个综合案例. 上次内容javascript反混淆之packed混淆(一) function getKey() { var aaaaf ...

  2. 多个id或class属性相同的元素绑定事件

    <td class="tools"><a href="javascript:void(0);" status="0" na ...

  3. css 水平、垂直居中

    水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...

  4. [写出来才有价值系列:node.js]node.js 02-,learnyounode

    安装learnyounode: npm install g learnyounode 官方说直接 但是我发现不行,很慢几乎就是死在那里了 还好有淘宝的东西给我们用https://npm.taobao. ...

  5. [ python ] 软件开发规范

    在python开发中,我们建议采用如下规范: soft/ ├── bin # 程序执行文件目录 │   ├── __init__.py │   └── start.py # 程序开始执行脚本文件 ├─ ...

  6. ireport报表制作, 当一个字段显示的数据太多时(数据过长),则需要自动换行

    1.当一个字段显示的数据太长,一个表格放不下,则需要自动换行,选中要更改的表格(要显示动态内容的字段),设置属性Stretch with overflow 为钩选状态. 未勾选之前: 勾选之后: 2. ...

  7. ios app应用在显示屏幕上改中文名

    1.点击项目名 2.选Build settings 搜索 product name 3.双击,改为需要在手机上显示的应用名

  8. 以太坊go-ethereum客户端docker安装(二)开发(dev)环境搭建

    在上一篇博客中,讲述了基于docker怎么搭建一个go-ethereum节点.作为开发人员,如果只是单纯的拥有一个Full node,还无法满足正常的开发.比如说,进行转账交易,你要考虑是否拥有一定的 ...

  9. 使用亚马逊云服务器EC2做深度学习(二)配置Jupyter Notebook服务器

    这是<使用亚马逊云服务器EC2做深度学习>系列的第二篇文章. (一)申请竞价实例  (二)配置Jupyter Notebook服务器  (三)配置TensorFlow  (四)配置好的系统 ...

  10. APS高级计划排程系统应该支持的企业应用场景

    APS高级计划排程系统应该支持的企业应用场景 面对工业4.0智能制造的挑战,很多企业希望能够引进APS高级计划排程系统,全自动的.快速的制定精细化的生产计划,准确的计算产线/设备上各种产品型号的加工顺 ...