текст внутри bootstrap div не учитывает границы div, используя angular 8

Question

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col-2 boarder">
      fjkdfjklsddfsfdkjdfskjldfskljdfdsfjkldfsdfsf
    </div>
    <div class="col-9">
      whatever
    </div>
  </div>
</div>

css файл

.boarder{
  border: solid 1px blueviolet;
}

есть код html

Вот подтверждение того, что bootstrap был установлен правильно:

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
              ],

Вот как выглядит эта чертова вещь

почему для этого? Ты знаешь почему для этого? Пожалуйста, объясните, почему для этого!

Answer 1

Используйте word-break: break-all;, это сломает длинные слова. Примечание