text-overflow: ellipsisは、限られたスペースに、テキストを表示する場合に文字列を省略して表示する機能ですが、省略された文字を、全文表示するのは困難ですが、
少しの工夫で、クリックすると全文表示に切り替えることが可能です。
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 htmlのリンク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.
なんでp要素がクリックできるの？ それは、tabindex属性を付けているから 🙂
HTML
<p class="test" tabindex="0" >lorem...</p>
CSS
.test{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.test:focus{
white-space: normal;
width: auto;
overflow: visible;
text-overflow: clip;
}
確かに、これで文字列を表示できるようになりましたが、この方法には、2つ問題があります。
- 表示面積が増えるので、レイアウトが崩れたり
- 文章中にリンクがある場合には、リンクをクリックできない
リンクは、javascript等で書くようにするとか、CSSのpositionプロパティで表示を工夫する必要が出てきます。
<a onclick="location.href='http://www.tenman.info/';" style="text-decoration:underline;">minim veniam</a>