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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -