Как исправить закругленные границы на обернутом тексте - PullRequest
Новая
       68

Как исправить закругленные границы на обернутом тексте

2 голосов
/ 07 марта 2012

В моем приложении есть таблица (сгенерированная динамически), которая имеет 3 столбца. Ячейки, в которых текст слишком длинный, оборачивается, что нормально, за исключением того, что округленные границы теперь выглядят плохо.

enter image description here

В настоящее время моя таблица обернута в DIV с идентификатором, установленным как item-list , и 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 - это навык, на котором я знаю достаточно, чтобы обычно выполнять то, что мне нужно, но не намного больше, чем любительский.

1 Ответ

2 голосов
/ 07 марта 2012

Добавьте display: block; к вашему #item-list a. 

#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 рядом с ним

...