Bootstrap class: .text-break
<div style="max-width:500px">
<p class="text-break">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeee</p>
</div>Preview
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeee
Check .text-break in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
Tips 💡
You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.
More in Bootstrap Typography
- display-# (1-4)
- blockquote
- blockquote-footer
- blockquote-reverse
- list-inline
- list-unstyled
- dl-horizontal
- lead
- display-1
- display-2
- display-3
- display-4
- display-5
- display-6
- font-monospace
- fs-1
- fs-2
- fs-3
- fs-4
- fs-5
- fs-6
- fs-lg-1
- fs-md-1
- fs-sm-1
- fs-4
- fst-italic
- fst-normal
- fw-bolder
- fw-normal
- fw-light
- fw-lighter
- h1
- h2
- h3
- h4
- h5
- h6
- lh-1
- lh-base
- lh-lg
- lh-sm
- text-center
- text-decoration-line-through
- text-decoration-underline
- text-start
- text-end
- text-lg-center
- text-lg-start
- text-lg-end
- text-md-center
- text-md-start
- text-md-end
- text-reset
- text-xl-start
- text-xl-end
- text-sm-center
- text-sm-start
- text-sm-end
- text-wrap
- text-xl-start
- text-xl-end
- text-xl-center
- text-xl-start
- text-xl-end
- text-xxl-center
- text-xxl-start
- text-xxl-end
