whitespace - Css text-overflow not showing properly -
whitespace - Css text-overflow not showing properly -
can't show h2
title when large
css:
.column li{ float: left; width: 200px; min-width: 150px; margin: 5px auto; display: inline; } .column li .block { height: 200px; margin-left: 5px; margin-right: 5px; padding: 20px; font-size: 1em; background-color: #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; border: 1px solid black; } .column li .block img { width: 89%; padding: 5%; border: 2px solid white; margin: 0 auto; display: block; background: white; } .column li .block h2{ font-size: 1.1em; margin: 10px 0 20px 0; border: 1px solid green; } .column li .block h2 a{ color: #000000; }
what doing wrong?
well, i'm guessing... since rule text-overflow: ellipsis
has height: 200px
, it's not actual element text in, rather bounding box grayness background.
text-overflow
, overflow
not inherited, means if want them apply text, must defined on element containing text, not parent element.
in other words:
.column li .block h2 { font-size: 1.1em; margin: 10px 0 20px 0; border: 1px solid green; text-overflow: ellipsis; /* <---- */ overflow: hidden; /* <---- */ white-space: nowrap; /* 1 inherited, consistency's sake, may want move */ }
if need multiple line box ellipsis @ end of lastly line, that's not possible without javascript. have @ this question.
css whitespace css3
Comments
Post a Comment