小编Tim*_*oes的帖子

我现在尝试了几件事(并在这里看了看),到目前为止没有任何工作.所以我要问.

我想要的是:

我有以下简单的HTML:

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>

表本身应该是父容器的100%宽度.我希望第一个和最后一个列(.small)尽可能大,所以内容可以适应它而不需要换行(所以几乎white-space: nowrap可以).中间列(.extend)应该占用剩余的空间(因此表将保持在其父容器的100%宽度内),并且内部文本.extend应该在需要中断到秒行之前省略.

我在http://jsfiddle.net/3bumk/准备了一个小提琴

有了这些背景颜色,我希望得到如下结果:

这有什么解决方案吗？

我得到了什么:

我的问题是,如果我可以使文本保持在一行(没有换行符),表将始终溢出其父容器宽度(并使其可滚动),然后才有想法省略文本中的文本中间栏.

什么是解决方案(我经常发现):

将第一列和第三列设置为"固定"(百分比或像素)是没有办法的,因为内容会不时地具有不同的长度.它可以添加尽可能多div或span根据需要(或摆脱表的所有一起-我的第一次尝试,有display和table,但我没有找到一个有效的解决方案这种方式要么).

PS:如果你能够编辑一个有效的例子,如果你知道一个,这将是非常好的:-)

编辑我也可以自由使用div而不是表格!

如果我有以下HTML:

<div id="myreactcomponent">
  <h1>Headline</h1>
  <p>Content</p>
</div>

我将一个ReactJS组件初始化为#myreactcomponent div,我可以以某种方式呈现组件内的h1和p元素吗？像这样的东西:

return (
  <Header></Header>
  { place h1 and p here }
  <Footer></Footer>
);

在ReactJS中有选择吗？

您可以检查此JSFiddle以查看我的问题的演示.

对于熟悉Angular的人:我<ng-transclude/>在React中搜索transclude选项和AngularJS指令的标记.

对于熟悉Polymer的人:我<content/>在React中搜索相应的标签.

UPDATE

我尝试了该this.props.children属性,但据我所知,这只有在初始HTML已经在React组件中时才有效.我真的需要渲染我最初渲染第一个React组件的元素的子元素.

更新2

将HTML移动到组件的初始化(如JSFiddle的更新中所示)在我的情况下不是一个选项,因为不同的系统呈现初始HTML和React组件.