javascript - ある div の内容が別の div に重なっている

Question

私は4つのdivを持っています。これらは

<div id="wrapper"><div id="AccWiseDate">Date</div><div id="AccWiseMemo">MemoMemoMemoMemoMemoMemo</div><div id="AccWiseDebit">Debit</div><div id="AccWiseCredit">Credit</div></div>

そして私のCSSコードは

#wrapper {
    position: relative;
  width:100%;
  clear: both;
}

#AccWiseDate {
    float: left;
    width:25%;
    text-align: left;
    font-size: 15px;
}

#AccWiseMemo {
    float: left;
    width:25%;
    text-align: left;
    font-size: 15px;
}

#AccWiseDebit {
    float: left;
    width:25%;
    text-align: left;
    font-size: 15px;
}

#AccWiseCredit {
    float: left;
    width:25%;
    text-align: left;
    font-size: 15px;
}

メモが幅よりもはるかに大きい場合があるため、別の div に重なっています。余分なテキストを非表示にする必要があります。詳細については、jsfiddle http://jsfiddle.net/WuZat/65/を参照してください。

私は何を間違っていますか。助けてください