如何让html中的td文字只显示部分

html-css021

如何让html中的td文字只显示部分,第1张

首先设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须） ，

这条属性就是让table的内部布局固定大小。

最后再设置td样式的三个必要属性

样式代码如下:

text-overflow: ellipsis

white-space:

nowrap

overflow: hidden

在table中必须设置style:

table-layout: fixed

<style>

td {

white-space:nowrapoverflow:hiddentext-overflow: ellipsis

}

</style>

属性描述

white-space:nowrap规定段落中的文本不进行换行

overflow:hidden关闭滚动条

text-overflow: ellipsis溢出的文字显示为省略号

这个时候你会发现，就算变成了省略号，就会出现不知道内容完整的是什么？

所以这个时候可以考虑使用td的title属性，在title属性中设置内容为显示内容，这样只要光标停留在td处就可以显示全部的内容，换行也需要table-layout: fixed

方法为：同时加入word-wrap:break-word

table{

table-layout:fixedword-wrap:break-word

}

</style>

整个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="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

 <style type="text/css">   

        table {  

            width:450px  

            table-layout:fixed  

        }  

        td {  

            white-space:nowrap  

            overflow:hidden  

text-overflow: ellipsis

        }  

    </style>  

</head>

<body>

<table border="1" cellspacing="0" >  

         <tr>  

             <th style="width:200px"><strong>FFF</strong></th>  

             <th style="width:250px"><strong>MMM</strong></th>  

         </tr>  

         <tr>  

             <td>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>  

             <td>MMMMMMMM</td>  

         </tr>  

    </table>  

</body>

</html>

效果图为：

html让文字一部分靠左显示，另外一部分靠右显示的代码如下：

1.使用float样式，让文字左右浮动即可，先输入向左浮动的文字，示例代码如下：

<div style="float:left">明月几时有？把酒问青天。</div>

2.然后输入向右浮动的文字，示例代码如下：

<div style="float:right">不知天上宫阙，今夕是何年。</div>

3.在浏览器中预览效果如下，文字一左一右分别显示；

4.通过设置text-align:right/text-align:left，改变文字居右和居左，示例代码如下：

<div style="float:lefttext-align:left">明月几时有？把酒问青天。<br>不知天上宫阙，今夕是何年。</div>

<div style="float:righttext-align:right">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。<br>起舞弄清影，何似在人间。</div>

5.预览效果如下，也实现了一左一右的显示，根据需要，选择以上两种方法中一种或组合使用。