如何控制<span>的换行

<c:forEach var="bean" items="${topBean}" varStatus="name">
<td width="80" height="20" class="menu">
<a href="${bean.tolocation}" target="_parent"><span align="center">${bean.channelname}</span></a>
<span class="line">|</span>
</td>
</c:forEach><span>是自动换行的。如果是做静态页面，很好控制。但是我这里要做一个动态生成的页面，所有频道名称都是从数据库读取的，长度不一：2-6个汉字。这样页面就乱了，产生了以下的页面效果：
新闻 | 数码 | 家居 |
文化办公 | 交通运输
| 电子仪表 | 软件产
品 | 。我如何才可以控制一下，如果某个 频道名| 长度需要换行，就用一个<br>或者</tr>换到下一行显示呢？从而可以出现下面的页面效果：
新闻 | 数码 | 家居 |
文化办公 |
交通运输| 家居 |
| 电子仪表
| 软件产品