Text truncation

Truncate long strings of text with an ellipsis.

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

This text is quite long, and will be truncated once displayed.

html

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    This text is quite long, and will be truncated once displayed.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text is quite long, and will be truncated once displayed.
</span>

${e.replace(/^/gm," ")} `,"index.js":t?"// NOTICE!!! Initially embedded in our docs this JavaScript\n// file contains elements that can help you create reproducible\n// use cases in StackBlitz for instance.\n// In a real project please adapt this content to your needs.\n// ++++++++++++++++++++++++++++++++++++++++++\n\n/*!\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2011-2022 The Bootstrap Authors\n * Copyright 2011-2022 Twitter, Inc.\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\n/* global bootstrap: false */\n\n(() => {\n 'use strict'\n\n // --------\n // Tooltips\n // --------\n // Instantiate all tooltips in a docs or StackBlitz page\n document.querySelectorAll('[data-bs-toggle=\"tooltip\"]')\n .forEach(tooltip => {\n new bootstrap.Tooltip(tooltip)\n })\n\n // --------\n // Popovers\n // --------\n // Instantiate all popovers in a docs or StackBlitz page\n document.querySelectorAll('[data-bs-toggle=\"popover\"]')\n .forEach(popover => {\n new bootstrap.Popover(popover)\n })\n\n // -------------------------------\n // Toasts\n // -------------------------------\n // Used by 'Placement' example in docs or StackBlitz\n const toastPlacement = document.getElementById('toastPlacement')\n if (toastPlacement) {\n document.getElementById('selectToastPlacement').addEventListener('change', function () {\n if (!toastPlacement.dataset.originalClass) {\n toastPlacement.dataset.originalClass = toastPlacement.className\n }\n\n toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`\n })\n }\n\n // Instantiate all toasts in a docs page only\n document.querySelectorAll('.bd-example .toast')\n .forEach(toastNode => {\n const toast = new bootstrap.Toast(toastNode, {\n autohide: false\n })\n\n toast.show()\n })\n\n // Instantiate all toasts in a docs page only\n const toastTrigger = document.getElementById('liveToastBtn')\n const toastLiveExample = document.getElementById('liveToast')\n if (toastTrigger) {\n toastTrigger.addEventListener('click', () => {\n const toast = new bootstrap.Toast(toastLiveExample)\n\n toast.show()\n })\n }\n\n // -------------------------------\n // Alerts\n // -------------------------------\n // Used in 'Show live toast' example in docs or StackBlitz\n const alertPlaceholder = document.getElementById('liveAlertPlaceholder')\n const alertTrigger = document.getElementById('liveAlertBtn')\n\n const appendAlert = (message, type) => {\n const wrapper = document.createElement('div')\n wrapper.innerHTML = [\n `

`,\n `

${message}

`,\n ' ',\n '

'\n ].join('')\n\n alertPlaceholder.append(wrapper)\n }\n\n if (alertTrigger) {\n alertTrigger.addEventListener('click', () => {\n appendAlert('Nice, you triggered this alert message!', 'success')\n })\n }\n\n // -------------------------------\n // Checks & Radios\n // -------------------------------\n // Indeterminate checkbox example in docs and StackBlitz\n document.querySelectorAll('.bd-example-indeterminate [type=\"checkbox\"]')\n .forEach(checkbox => {\n if (checkbox.id.includes('Indeterminate')) {\n checkbox.indeterminate = true\n }\n })\n\n // -------------------------------\n // Links\n // -------------------------------\n // Disable empty links in docs examples only\n document.querySelectorAll('.bd-content [href=\"#\"]')\n .forEach(link => {\n link.addEventListener('click', event => {\n event.preventDefault()\n })\n })\n\n // -------------------------------\n // Modal\n // -------------------------------\n // Modal 'Varying modal content' example in docs and StackBlitz\n const exampleModal = document.getElementById('exampleModal')\n if (exampleModal) {\n exampleModal.addEventListener('show.bs.modal', event => {\n // Button that triggered the modal\n const button = event.relatedTarget\n // Extract info from data-bs-* attributes\n const recipient = button.getAttribute('data-bs-whatever')\n\n // Update the modal's content.\n const modalTitle = exampleModal.querySelector('.modal-title')\n const modalBodyInput = exampleModal.querySelector('.modal-body input')\n\n modalTitle.textContent = `New message to ${recipient}`\n modalBodyInput.value = recipient\n })\n }\n\n // -------------------------------\n // Offcanvas\n // -------------------------------\n // 'Offcanvas components' example in docs only\n const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')\n if (myOffcanvas) {\n myOffcanvas.forEach(offcanvas => {\n offcanvas.addEventListener('show.bs.offcanvas', event => {\n event.preventDefault()\n }, false)\n })\n }\n})()\n":null},title:"Bootstrap Example",description:"Official example from "+window.location.href,template:t?"javascript":"html",tags:["bootstrap"]};StackBlitzSDK.openProject(n,{openFile:"index.html"})}