javascript 使td内容不换行不撑开

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<style type="text/css">
table {width:200px;table-layout:fixed;}
td {white-space:nowrap;overflow:hidden;word-break:keep-all;}
</style>
<table border="1">
<tr>
<td style="width:50px;">测试测试测试测试测试测试测试测试测试测试</td>
<td>测试测试测试测试测试测试测试测试测试测试测试测试</td>
</tr>
<tr>
<td>测试测试测试测试测试测试测试测试测试测试测试</td>
<td>测试测试测试测试测试测试测试测试测试测试测试</td>
</tr>
</table>
</body>
</html>

赞 (0)

相关推荐

  • div css nowrap无换行

    例如宽度为210px的ul里   分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px.120px.140px.80px.     我需要的效果是4个li向左自动排列.当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行.在第二行显示.而不是把ul撑宽,或者是把自己撑高(内容换行,高度增加) 分别定义了ul的宽度210px和li的宽度自动,发现结果是: ul并没有被撑宽,可惜li也没有自动到下一样排列.而是内容换行,把li给撑高了.然后死皮赖脸的挤在了第一行

  • html小技巧之td,div标签里内容不换行

    在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行: Ex二.div标签(或其他标记)里内容有文本和图片引起换行: 解决方法: 针对例子一用<nobr></nobr>标签把换行的内容全部包起来,可以解决问题: 针对例子二用CSS样式white-space: nowrap;可以使图片和内容不换行,(经自己测试使用<nobr></nobr>标签也可以).

  • javascript 使td内容不换行不撑开

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <style type="text/css"

  • JavaScript使表单中的内容显示在屏幕上的方法

    本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法.分享给大家供大家参考.具体实现方法如下: 一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getEl

  • JavaScript用document.write()输出换行的示例代码

    JavaScript用document.write()输出换行的示例代码

    当我们想用document.write()输出换行时,可能会第一时间想到加"\n",但是其实不能达到我们的想要效果,只会得到一个空格的效果. 正确的方法是使用:</br> 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> // 使用 \n 换行 ---> 错误的方法 document.write(&quo

  • ASP.NET GridView中文本内容无法换行(自动换行/正常换行)

    ASP.NET GridView中文本内容无法换行(自动换行/正常换行)

    最近做项目的时候,遇到这样一个问题:我用GridView来显示课程表,每个单元格的内容包括课程名.上课地点.教师姓名,然后我想让它们分行显示,效果如下图: 可是呢,GridView太顽强了,不管我拼接字符串时用"\r\n"还是"<br/>",结果都无济于事,都不分行显示.经过近半天的时间查询资料,最终终于解决了这个问题,下面就与大家分享一下. GridView中的换行问题可以分为两类:一类是自动换行,另一类是正常换行. 先说第一类:自动换行 GridVi

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 var endYear=myDate.

  • JavaScript判断DIV内容是否为空的方法

    JavaScript判断DIV内容是否为空的方法

    1.问题背景 判断div内部是否为空,如果为空,给出无数据提示:否则显示正常页面 2.实现效果图如下所示: 3.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • javascript实现输入框内容提示及隐藏功能

    javascript实现输入框内容提示及隐藏功能

    有时输入框较小,希望输入内容后,出现一个有放大输入内容的提示框 实现思路 页面上先编写出提示框,然后将提示框的css属性:display设置成none,隐藏起来 获取输入框元素对象.信息提示框元素对象 为输入框元素对象绑定键盘事件- - -keyup, 事件处理程序:判断输入的内容是否为空,不为空- - -将输入框的内容赋值给信息提示框,并设置信息提示框显示:display设置成block:为空,设置提示框不显示 添加获取焦点和失去焦点事件. blur- - -失去焦点:鼠标不选中输入框,输入框

  • javascript打印html内容功能的方法示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐