将按钮和文本字段水平保持在HTML中的表格单元格内

Question

我想要一个表格，其中在最左侧列的单元格内部，既有<input>标签定义的按钮，也有<td>标签定义的文本字段。更具体地说，下面是表中每行的实际html。

<td width="10%" ><input  style = "font-size: 12px;"  type="submit" name="expand" value="+"/>{$SPName}</td>

我的问题是当文本字段比单元格可以容纳的长时，该按钮最终位于文本字段上方。我想要的是按钮始终位于文本的左侧，无论文本多长。溢出的文本可以环绕按钮和文本的第一部分。有人有什么建议吗？

Answer 1

您可以在表格单元格上使用css属性'white-space:nowrap'。

<td width="10%" style="white-space:nowrap"><input  style = "font-size: 12px;"  type="submit" name="expand" value="+"/>{$SPName}</td>

Answer 2

我使用了一个单词中断，让它在任何角色之后都会中断。我不是100％肯定这是你要求的，但我相信它至少可以帮助你。

div.test {
    width: 11em; 
    word-break: break-all;
}

<div class="test"><td width="10%"><input style = "font-size: 12px;" type="submit" name="expand" value="+"/>{$SPName}</td></div>