javascript - 長いテキストを切り捨てる省略記号

Question

省略記号の概念を使用して、HTML 内の長いテキストを切り捨てています。文を切り捨てることに成功しましたが、「...」が HTML に表示されません。私はcssに以下を使用します

出力は問題ないようです..つまり、テストテストテストテストテストテストテストテストテストの場合、実際にテストテストテストとして出力したいのに、出力はテストテストテストです...

<div style="text-align:left; line-height: 20px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; width: 99%;
            display : block;"> 

Answer 1

何を求めているのか、何を見ているのかわかりませんが、コンテナに十分なスペースがない場合にのみ、テキストが切り捨てられます。例えば：

<style type="text/css">
div {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100px;
}
</style>
<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

http://jsfiddle.net/jS7ea/

ここでは、div の幅を 100px に制限し、これだけを表示します。

Lorem ipsu...

あなたの例では幅が 99% であるため、実際のコンテンツの幅よりも小さい場合にのみ切り捨てが表示されます (ブラウザー ウィンドウのサイズを変更して確認してください)。

Answer 2