blocks|key|2745179|text|表格单元格非常努力地显示您在其中所放的所有内容。到目前为止，他们使用他们的宽度和高度属性作为粗略的指导方针，而不是硬限制。需要更多的展示吗？那就越大越好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2745180|解决方案是在表格单元格中放置一个<div>，给出所需的宽度和高度，以及overflow:hidden。这样，表格单元格就不会增长，因为它不必增长，文本也不会扩展到div的边界之外。|offset|length|style|CODE|2745181|entityMap^0|0|G|5|Z|F|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Table cells work very hard to show everything you put in it. Up to the point where they use their width and height properties as rough guidelines, rather than hard restrictions. Need to display more? Then just grow bigger.

The solution is to put a <code>&lt;div&gt;</code> inside the table cell that you give the desired width and height, and <code>overflow:hidden</code>. Then the table cell won't grow, because it won't have to, and the text will not extend beyond the boundaries of the div.

blocks|key|2745198|text|这会起作用的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2745199|<div+style="width:100px;+padding:10px;+height:50px;+overflow:hidden;">
++Your+text+goes+here+....+Your+text+goes+here+....+Your+text+goes+here+....
</div>|code-block|syntax|javascript|2745200|谢谢|2745201|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This will work

<pre><code>&lt;div style="width:100px; padding:10px; height:50px; overflow:hidden;"&gt;
 Your text goes here .... Your text goes here .... Your text goes here ....
&lt;/div&gt;
</code></pre>

Thanks

blocks|key|2745240|text|如果只想显示两行并隐藏rest，则需要指定单元格的显示、行高、溢出以及宽度和高度属性，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2745241|.your_class+{
++++line-height:+16px;
++++height:+32px;
++++width:+100px;+/*+This+should+be+as+per+your+requirement+*/
++++overflow:+hidden;
++++word-break:+break-word;+/*+for+breaking+longer+text+*/
++++word-break:+break-all;
++++display:+block;
}|code-block|syntax|javascript|2745242|你可以检查一下这里的工作，http://jsfiddle.net/WLcC4/|offset|length|2745243|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/WLcC4/^0|0|0|D|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If you want just to show two lines, and hide rest, the you need to specify the display, line-height, overflow and width and height property of the cell,

<pre><code>.your_class {
 line-height: 16px;
 height: 32px;
 width: 100px; /* This should be as per your requirement */
 overflow: hidden;
 word-break: break-word; /* for breaking longer text */
 word-break: break-all;
 display: block;
}
</code></pre>

You can check the working over here <a href="http://jsfiddle.net/WLcC4/" rel="nofollow">http://jsfiddle.net/WLcC4/</a>

blocks|key|347045|text|你必须给|type|unstyled|depth|inlineStyleRanges|entityRanges|data|347046|height+|code-block|syntax|javascript|347047|和|347048|overflow:hidden|347049|表单元格|347050|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You have to give the 

<pre><code>height 
</code></pre>

and 

<pre><code>overflow:hidden
</code></pre>

for table cell

blocks|key|1422981|text|您还想通过添加省略号来截断它吗？如果是这样的话，我推荐trunk8。如果不需要省略号，只需执行overflow:+hidden并显式设置height属性即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1422982|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rviscomi/trunk8^0|1B|G|1W|6|R|6|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Do you also want it to truncate by adding ellipsis? If that's the case, I recommend <a href="https://github.com/rviscomi/trunk8" rel="nofollow">trunk8</a>. If you don't want the ellipsis, just do <code>overflow: hidden</code> and set the <code>height</code> attribute explicitly.

blocks|key|1423013|text|请为table和td提供一个特定的宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1423014|将此css样式应用于表：|1423015|table-layout:+fixed;|code-block|syntax|javascript|1423016|将这些css样式应用于您想要安装的td：|1423017|overflow:+hidden;
white-space:+nowrap;|1423018|如果要显示椭圆：|1423019|text-overflow:+ellipsis;|1423020|看这把小提琴：http://jsfiddle.net/h4fqm/|1423021|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/h4fqm/^0|2|5|8|2|0|0|0|H|2|0|0|0|0|7|Q|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|W|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

Please provide a specific width to the <code>table</code> and <code>td</code>. 

Apply this css style to the table:

<pre><code>table-layout: fixed;
</code></pre>

Apply these css styles to the <code>td</code> you want to fit:

<pre><code>overflow: hidden;
white-space: nowrap;
</code></pre>

If you want to show ellipses:

<pre><code>text-overflow: ellipsis;
</code></pre>

See this fiddle: <a href="http://jsfiddle.net/h4fqm/" rel="nofollow">http://jsfiddle.net/h4fqm/</a>

Sorry for just posting a question without any self labor proof.

I want to word wrap a cell in a table, but only up to 2 lines.

<img src="https://i.stack.imgur.com/oBeyS.jpg" alt="Example">

Going wider is also not an option.
Any ideas?

Word wrap up to two lines in a table cell

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

很抱歉，刚刚发布了一个问题，没有任何自我劳动证明。我想把一个单元格放在一个表格里，但最多只有2行。​​扩大范围也不是一种选择。有什么想法吗？

问Word在表格单元格中最多可包含两行。
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Word在表格单元格中最多可包含两行。EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Word在表格单元格中最多可包含两行。
EN