Word break inside button

Admin 1
Viewed 162
<div class="col-md-3 bg-primary p-1 align-content-center text-center mb-5">
   <div class="container bg-light sticky-top jumbotron" role="group">
      @foreach (var item in Model.Data)
      {
         <div class="row mb-1">
            <a class="btn btn-secondary flex-fill" asp-action="Index" asp-controller="Search" asp-route-query="@item">@item</a>
         </div>
      }
   </div>
</div>

I'm dynamically adding buttons into the column. But text inside button might be wider than column, and then it can go further and beyond the screen.

How to ensure that text inside button will break before getting out of the column? I have tried class with word-wrap: break-word inside <a> which works for text inside paragraph but not here, and I'm kind of lost.

twitter-bootstrap .net-core css asp.net html
2 Answers

It lools like your a element overflows its container.

So try to create a class and apply it to your button:

.foo {
    word-wrap: break-word;
    width: 100%;
    white-space: normal;
}

and:

<div class="row mb-1">
    <a class="btn btn-secondary flex-fill foo" 
        asp-action="Index" asp-controller="Search" asp-route-query="@item">@item</a>
</div>

A fiddle example can be seen here

user_16462400

Maybe try use:

a {display: inline-block; max-width: 100px; vertical-align: middle;}

word-wrap: break-word work only with display (inline & block)

user_135239460
Related