래핑 된 텍스트에 둥근 테두리를 수정하는 방법

Question

3 개의 열이있는 내 응용 프로그램에 동적으로 생성 된 테이블이 있습니다. 텍스트가 너무 긴 셀은 둥근 테두리를 제외하고는 잘 돌아갑니다.

가 현재 내 테이블이 항목 목록로 설정 한 아이디와 DIV에 싸여와 CSS는 다음과 같다 :

#item-list { 
    text-align: center; 
} 


#item-list table { 
margin: auto auto; 
} 

#item-list td { 
padding: 10px; 
text-align: center; 
} 

#item-list a { 
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; 
} 

내 질문은, 방법이 있습니다 CSS를 사용하여 줄 바꿈 된 텍스트를 모든 가장자리에서 둥글게 만듭니다.

[면책 조항] 내 전문 지식은 PHP입니다. CSS는 내가 보통해야 할 일을 충분히 수행 할 수있는 기술이지만, 아마추어를 뛰어 넘는 것은 아닙니다.

Answer 1

#item-list a에 display: block;을 추가하십시오. 내가 당신을 위해 간단한 예를 설정 한

#item-list a { 
    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; 
} 

- http://jsfiddle.net/spacebeers/g5YcT/

디스플레이 블록

요소는 (단락과 헤더와 같은) 블록 요소로 표시됩니다. 블록 요소 위 및 아래에 공백이 있고 은 옆에있는 HTML 요소를 허용하지 않습니다.