Застрял; Text Wrapping Very Strangely In A Div

Question

Я пишу представление для приложения ASP.NET MVC, и у меня есть цикл, который создает кнопку для каждого элемента в списке имен категорий. Каждая кнопка представляет собой коробку 125px x 125px. Однако иногда название категории длиннее кнопки. Я хочу, чтобы текст обернулся в поле. Прямо сейчас, это обертывание, но вне коробки. Я не уверен, как это исправить. Я подозреваю, что это имеет какое-то отношение к разделу «обертка». Я добавил изображения того, как это выглядит.

What it looks like

Strange text wrapping revealed

CSHTML:

<section class="wrap"> 

     @foreach (var category in ViewBag.Categories) 
     { 
      <a role="button" href="#@cat.Replace(" ", "_")" aria-expanded="false" aria-controls="@category.Replace(" ", "_")"> 
       <div class="category-box"> 
        <b>@category</b> 
       </div> 
      </a> 
     } 
</section> 

CSS:

.category-box{ 

    width: 125px; 
    height: 125px; 
    background-color: rgb(70, 158, 165); 
    color: white; 
    margin: 10px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 125px; 
    display: block; 
    word-wrap: break-word; 
} 

.category-box:hover{ 

    background-color: rgb(70, 104, 165); 
    color: white; 
} 

.wrap { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 95vh; 
    width: 10px; 
    position: fixed; 
    top: 50px; 
    left: 0; 
    z-index: 999; 
} 

.wrap a:hover { 
    text-decoration: none; 
} 

Answer 1

высота линии является проблемой. Сбросьте его или установите на 1,2 мкм для оптимального просмотра. И я рекомендую удалить внутренний якорь <div> и установить привязку на inline-block.