61,129
社区成员
发帖
与我相关
我的任务
分享怎样使一行文字限制在表格的一行内，多余的部分不显示？
就是比如有一行文字，很长，表格内一行显示不下，会跑到第二行，而我现在希望就输出一行，多余的部分不用显示，就限制在一行内，请问怎么做？？谢谢！！
...全文
请发表友善的回复…
发表回复
sfchina 2004-12-29
- 打赏
- 举报
使用text-overflow样式
看看例子吧
<HTML>
<BODY>
<DIV STYLE="text-decoration:underline;color:darkRed;
font: bold 20px Arial;font-weight:bold">
Effect of CSS property <I>text-overflow</I></DIV>
<DIV STYLE="font: bold 16px Arial; color:darkRed; font-weight:bold">
Each box (DIV element) below contains the following text:</DIV>
<DIV >We hold these truths to be self-evident,
that all people are created equal.</DIV>
<DIV STYLE="font: bold 16px Arial;color:darkRed; font-weight:bold">
Note how the STYLE settings effect the rendering of the text</DIV>
<DIV STYLE="position: relative; height: 75px; top:10">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : clip; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:clip">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top: 70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top:70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : visible"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: visible;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
</BODY>
</HTML>
看看例子吧
<HTML>
<BODY>
<DIV STYLE="text-decoration:underline;color:darkRed;
font: bold 20px Arial;font-weight:bold">
Effect of CSS property <I>text-overflow</I></DIV>
<DIV STYLE="font: bold 16px Arial; color:darkRed; font-weight:bold">
Each box (DIV element) below contains the following text:</DIV>
<DIV >We hold these truths to be self-evident,
that all people are created equal.</DIV>
<DIV STYLE="font: bold 16px Arial;color:darkRed; font-weight:bold">
Note how the STYLE settings effect the rendering of the text</DIV>
<DIV STYLE="position: relative; height: 75px; top:10">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : clip; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:clip">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top: 70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top:70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : visible"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: visible;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
</BODY>
</HTML>
CodeBunny 2004-12-29
- 打赏
- 举报
在表元内加个<Div>，文字放到DIV内，设置DIV高度为一行行高，并设置溢出部分剪切，就行了
newbreed 2004-12-28
- 打赏
- 举报
<table width="100 style="TABLE-LAYOUT: fixed">
<tr>
<td>asdfasfdasdffasdfasdfasdfasdfasdf`112121212121313131331
</td>
</tr>
</table>
<tr>
<td>asdfasfdasdffasdfasdfasdfasdfasdf`112121212121313131331
</td>
</tr>
</table>
bzscs 2004-12-28
- 打赏
- 举报
<table border="1" id="bzscs" width=50>
<tr>
<td><div style="width:33px;overflow: hidden">111111111111111</div></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<tr>
<td><div style="width:33px;overflow: hidden">111111111111111</div></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
