blocks|key|1655041|text|在td上使用CSS属性white-space:+nowrap和overflow:+hidden。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1655042|更新|1655043|刚看了你的评论，不知道我在想什么，我做过很多次了，我都忘了我是怎么做的了。对于我来说，这是一种在大多数浏览器中都工作得很好的方法。我没有尝试约束td，而是在td中使用了一个div来处理溢出实例。这有一个很好的副作用，可以将填充、页边距、背景颜色等添加到div中，而不是尝试设置td样式。|1655044|<html>
<head>
<style>
.hideextra+{+white-space:+nowrap;+overflow:+hidden;+text-overflow:ellipsis;+}
</style>
</head>
<body>
<table+style="width:+300px">
<tr>
++++<td>Column+1</td><td>Column+2</td>
</tr>
<tr>
+++<td>
++++<div+class="hideextra"+style="width:200px">
++++++++this+is+the+text+in+column+one+which+wraps</div></td>
+++<td>
++++<div+class="hideextra"+style="width:100px">
++++++++this+is+the+column+two+test</div></td>
</tr>
</table>
</body>
</html>|code-block|syntax|javascript|1655045|作为额外的好处，IE将在溢出的情况下使用浏览器特定的文本溢出:省略号样式放置一个省略号。也有一种自动执行do+the+same+in+FireFox的方法，但我还没有亲自测试过。|1655046|更新2|1655047|我开始使用贾斯汀·麦克斯韦尔的this+truncation+code已经有几个月了，它在FireFox中也能正常工作。|1655048|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_text_white-space.asp|1|http://www.w3schools.com/cssref/pr_pos_overflow.asp|2|http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css|3|http://mattsnider.com/css/css-string-truncation-with-ellipsis/^0|B|J|0|V|G|1|0|0|0|0|1G|M|2|0|0|F|K|3|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|13]]|14|$5|V|W|X|C|$Y|15]]]]

<p>Use the CSS property <a href="http://www.w3schools.com/cssref/pr_text_white-space.asp" rel="noreferrer">white-space: nowrap</a> and <a href="http://www.w3schools.com/cssref/pr_pos_overflow.asp" rel="noreferrer">overflow: hidden</a> on your td.</p>

<h2>Update</h2>

<p>Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table style="width: 300px"&gt;
&lt;tr&gt;
    &lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td&gt;
    &lt;div class="hideextra" style="width:200px"&gt;
        this is the text in column one which wraps&lt;/div&gt;&lt;/td&gt;
   &lt;td&gt;
    &lt;div class="hideextra" style="width:100px"&gt;
        this is the column two test&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to <a href="http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css" rel="noreferrer">do the same in FireFox</a> automatically too, but I have not tested it myself.</p>

<h2>Update 2</h2>

<p>I started using <a href="http://mattsnider.com/css/css-string-truncation-with-ellipsis/" rel="noreferrer">this truncation code</a> by Justin Maxwell for several months now which works properly in FireFox too.</p>


blocks|key|1440394|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1440395|td,+th+{
++white-space:+nowrap;
++overflow:+hidden;
}|code-block|syntax|javascript|1440396|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try:</p>

<pre><code>td, th {
  white-space: nowrap;
  overflow: hidden;
}
</code></pre>


blocks|key|1440448|text|正如cletus所说，您应该使用white-space:+nowrap来避免换行，使用overflow:hidden来隐藏溢出。但是，为了使文本被视为溢出，您应该设置td/th宽度，因此，如果文本需要的宽度超过指定的宽度，它将被视为溢出，并将被隐藏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1440449|此外，如果你提供了一个示例网页，响应者可以提供一个带有你喜欢的修复程序的更新页面。|1440450|entityMap^0|G|J|17|F|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>As cletus said, you should use <code>white-space: nowrap</code> to avoid the line wrapping, and <code>overflow:hidden</code> to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.</p>

<p>Also, if you give a sample web page, responders can provide an updated page with the fix you like.</p>


blocks|key|1440469|text|如果您隐藏了溢出，并且有一个很长的单词，那么您可能会丢失该单词，因此您可以更进一步，使用"+word+-wrap“css属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1440470|http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx|offset|length|1440471|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1O|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.</p>

<p><a href="http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx</a></p>


blocks|key|1655154|text|我想知道是否值得使用PHP+(或其他服务器端脚本语言)或Javascript将字符串截断为正确的长度(尽管计算正确的长度很棘手，除非您使用固定宽度的字体)？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655155|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?</p>


blocks|key|1655186|text|这里的技巧是使用深奥的table-layout:fixed规则|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1655187|这个CSS应该和你的HTML样例一起工作：|1655188|table+{table-layout:fixed}
td+{overflow:hidden;+white-space:nowrap}|code-block|syntax|javascript|1655189|您还应该为<td>指定显式列宽。|1655190|table-layout:fixed规则说“这个表格的单元格宽度取决于我所说的内容，而不是单元格中的实际内容”。这通常很有用，因为浏览器可以在收到第一个<tr>后开始显示表。否则，浏览器必须先接收整个表，然后才能计算列宽。|1655191|entityMap^0|B|I|0|0|0|5|4|0|0|I|24|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

<p>This trick here is using the esoteric <code>table-layout:fixed</code> rule</p>

<p>This CSS ought to work against your sample HTML:</p>

<pre><code>table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
</code></pre>

<p>You also ought to specify explicit column widths for the <code>&lt;td&gt;</code>s.</p>

<p>The <code>table-layout:fixed</code> rule says "The cell widths of this table depend on what I say, not on the actual content in the cells".  This is useful normally because the browser can begin displaying the table after it has received the first <code>&lt;tr&gt;</code>.  Otherwise, the browser has to receive the entire table before it can compute the column widths.  </p>


blocks|key|1440622|text|如果您不希望文本换行，并且不希望列的大小变大，那么在列上设置宽度和高度，并在样式表中设置"overflow:+hidden“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1440623|要仅对一列执行此操作，您需要在每行的该列中添加一个类。否则，您可以在所有列上设置它，这取决于您。|1440624|Html：|1440625|<table+width="300px">
<tr>
++++<td>Column+1</td><td>Column+2</td>
</tr>
<tr>
+++<td+class="column-1">this+is+the+text+in+column+one+which+wraps</td>
+++<td>this+is+the+column+two+test</td>
</tr>
</table>|code-block|syntax|javascript|1440626|样式表：|1440627|.column-1
{
++overflow:+hidden;
++width:+150px;
++height:+1.2ex;+
}|1440628|ex单位是高度的相对字体大小，如果您使用像素来设置字体大小，您可能希望使用该单位。|1440629|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet. </p>

<p>To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.</p>

<p>Html:</p>

<pre><code>&lt;table width="300px"&gt;
&lt;tr&gt;
    &lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td class="column-1"&gt;this is the text in column one which wraps&lt;/td&gt;
   &lt;td&gt;this is the column two test&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>stylsheet:</p>

<pre><code>.column-1
{
  overflow: hidden;
  width: 150px;
  height: 1.2ex; 
}
</code></pre>

<p>An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.</p>


blocks|key|1655315|text|对于那些更感兴趣的人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655316|现有动态表格单元格:不带空格的##长文本，如电子邮件地址##|1655317|就将内部附加的text-overflow:ellipsis添加到剪切的文本而言，似乎完全复制了MS+(和其他)对…的使用在FireFox中是无法欺骗的；特别是在没有javascript的情况下，这一点最近经常被用户关闭。|offset|length|style|CODE|1655318|我发现的所有帮助我的想法都无法解决动态调整大小和没有空格的长文本。|1655319|然而，我需要在我的progs管理窗口中的一个动态宽度表中进行裁剪。因此，只要稍微摆弄一下，就可以从“MSDN”上提供的示例中破解出一个可以接受的所有浏览器的答案。|1655320|即|1655321|<table+width="20%25"+border="1"+STYLE="position:+absolute;+top:+100;">
<tr>

<td+width="100%25"><DIV+STYLE="position:+relative;+height:+14px;+top:+0px;+width:100%25;">
<DIV+STYLE="position:+absolute;+left:+0px;+top:+0px;+color:+black;+width:+100%25;+height:+14px;
++++font:+12px+Verdana,+Arial,+Geneva,+sans-serif;+overflow:+hidden;+text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe+hold+these+truths+to+be+self-evident,+that+all+people+are+created+equal.</NOBR></DIV>
</DIV>

</td>
</tr>
</table>|code-block|syntax|javascript|1655322|唯一的一个小缺点是火狐用户看不到“…”比特；这是summink，我在这个阶段并不介意。|1655323|如果实现这个非常重要的选项，未来的FF将有望优雅地解决。因此，现在我也不需要使用不太受欢迎的未来主义的非表格式内容来重写了(别争论了；因为它的缘故，周围有很多破碎的网站)。|1655324|感谢：http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx|1655325|希望这对bod有所帮助。|1655326|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx^0|0|0|7|M|1K|1|0|0|0|0|0|0|0|3|1O|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@$F|1D|G|1E|H|I]|$F|1F|G|1G|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1J|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1K|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|9|@$F|1O|G|1P|1|1Q]]|A|$]]|$1|10|3|11|5|6|7|1R|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<p>For those further interested: </p>

<p>Existing Dynamic Table Cells: ## Long text with NO SPACES i.e. email addresses ## </p>

<p>It appears a full replication of the MS (and others) use of <code>text-overflow:ellipsis</code> cannot be duped in FireFox so far as adding the internally appended <code>…</code> to clipped text is concerned; especially without javascript which is often user switched off these days. </p>

<p>All ideas I have found to help me have failed to address dynamic resizing and long text without spaces. </p>

<p>However, I had a need for clipping in a dynamic width table in one of my progs admin windows. So with a little fiddling an acceptable all browser answer can be hacked from the supplied samples at “MSDN”. </p>

<p>i.e. </p>

<pre><code>&lt;table width="20%" border="1" STYLE="position: absolute; top: 100;"&gt;
&lt;tr&gt;

&lt;td width="100%"&gt;&lt;DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;"&gt;
&lt;DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
    font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;"&gt;
&lt;NOBR&gt;fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.&lt;/NOBR&gt;&lt;/DIV&gt;
&lt;/DIV&gt;

&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Only small shortcoming is Firefox users don’t see the “…” bit; which is summink I don’t really mind at this stage. </p>

<p>Future FF should, hopefully, resolve gracefully if implementing this very important useful option. So now I don’t need to rewrite using less favorable futuristic non tabled content either (don’t argue; there’s plenty of broken web sites around ’cause of it these days). </p>

<p>Thanks to: 
<a href="http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx</a> </p>

<p>Hope it helps some bod. </p>


blocks|key|1440734|text|在td元素上使用position:绝对；和width:xxx%25；。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1440735|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Use position:absolute; and width:xxx%; on the td-Element.</p>


blocks|key|1655407|text|在任何需要在一行中输入文本的地方，都可以放入以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655408|white-space:nowrap|code-block|syntax|javascript|1655409|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Where ever you need to text in one line put this code</p>
<pre><code>white-space:nowrap
</code></pre>


<p>I have an HTML table that looks like this:</p>

<pre><code>-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------
</code></pre>

<p>But I want it to hide the overflow. The reason here is that the text contains a link to more details, and having the "wrapping" wastes lots of space in my layout. It should like this (without increasing the widths of the columns or the table, because they'll go off the screen/create a horizontal scrollbar otherwise):</p>

<pre><code>-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
</code></pre>

<p>I've tried lots of different CSS techniques to try to get this, but I can't get it to turn out right. Mootables is the only thing I've found that does this: <a href="http://joomlicious.com/mootable/" rel="noreferrer">http://joomlicious.com/mootable/</a>, but I can't figure out how they do it. Does anyone know how I can do this with my own table using CSS and/or Javascript, or how Mootables does it?</p>

<p>Sample HTML:</p>

<pre><code>&lt;html&gt;&lt;body&gt;
&lt;table width="300px"&gt;
&lt;tr&gt;
    &lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
   &lt;td&gt;this is the text in column one which wraps&lt;/td&gt;
   &lt;td&gt;this is the column two test&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>


CSS/Javascript to force html table row on a single line

服务器

我有一个HTML表，如下所示：-------------------------------------------------|Column 1                   |Column 2           |-----------------------------------------------...

问CSS/Javascript强制html表格行在单行上
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/Javascript强制html表格行在单行上EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/Javascript强制html表格行在单行上
EN