切换布局
显示结果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4 文本类 - 迹忆客(jiyik.com)</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <style> .bs-example{ margin: 20px; } .bd-highlight{ width: 200px; background-color: #ffe1ef; border: 1px solid #f75da4; } </style> </head> <body> <div class="bs-example"> <h2>Text alignment</h2> <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</p> <hr> <h2>Responsive Text alignment</h2> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> <hr> <h2>Text wrapping and overflow</h2> <p class="badge badge-primary text-wrap" style="width: 6rem;">This text should wrap.</p> <p class="text-nowrap bd-highlight" style="width: 10rem;">No wrap text. This text should overflow the parent.</p> <!-- Block level --> <div class="row"> <div class="col-2 text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </div> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <hr> <h2>Word break</h2> <p class="text-break">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <hr> <h2>Text transform</h2> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> <hr> <h2>Font weight and italics</h2> <p class="font-weight-bold">Bold text.</p> <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-weight-light">Light weight text.</p> <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p> <p class="font-italic">Italic text.</p> <hr> <h2>Monospace</h2> <p class="text-monospace">This is in monospace</p> <hr> <h2>Reset color</h2> <p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a>.</p> <hr> <h2>Text decoration</h2> <a href="#" class="text-decoration-none">Non-underlined link</a> </div> </body> </html>
