html - How to Fix Rounded Borders on Text that is Wrapped -
i have table in application (generated dynamically) has 3 columns. cells text long, wraps around fine except rounded borders bad.
currently, table wrapped in div
id set item-list , css follows:
#item-list { text-align: center; } #item-list table { margin: auto auto; } #item-list td { padding: 10px; text-align: center; } #item-list { font-size: 0.8em; color: #fff; margin: 10px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 4px; padding-left: 10px; padding-right: 10px; background-color: #1a546a; text-decoration: none; font-weight: bold; } #item-list a:hover { background-color: #8f2525; }
my question is, there way using css make wrapped text still rounded on edges?
[disclaimer] expertise in php. css skill know enough accomplish need do, not beyond amateurish.
add display: block;
#item-list a
.
#item-list { font-size: 0.8em; color: #fff; display: block; margin: 10px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 4px; padding-left: 10px; padding-right: 10px; background-color: #1a546a; text-decoration: none; font-weight: bold; }
i've set quick example - http://jsfiddle.net/spacebeers/g5yct/
display block
the element displayed block element (like paragraphs , headers). block element has whitespace above , below , not tolerate html elements next it
Comments
Post a Comment