文本

控制文本对齐、换行、溢出、转换等等。

文本对齐

Alignment 助手类允许你轻松的创建 re-align 文本。

template

<template>
  <p class="text-justify">
    Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Fusce convallis metus id felis luctus adipiscing. Aenean massa. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
    Nulla consequat massa quis enim. Praesent venenatis metus at tortor pulvinar varius. Donec venenatis vulputate lorem. Phasellus accumsan cursus velit. Pellentesque ut neque.
  </p>
</template>

还有可用于支持响应式显示的 alignment 类。

template

<template>
  <div>
    <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-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>
  </div>
</template>

文本换行和溢出

你能够使用 .text-no-wrap 类来防止文本换行。

template style

<template>
  <div
    class="text-no-wrap text-example"
    style="width: 8rem;"
  >
    This text should overflow the parent.
  </div>
</template>

<style lang="sass">
  .text-example
    background-color: rgba(86, 61, 124,.15)
    border: 1px solid rgba(86, 61, 124,.15)
</style>

较长的内容可以用文本省略号截断。需要 display: inline-block 或者 display: block。

template

<template>
  <div>
    <!-- Block level -->
    <div class="row">
      <div class="col-2 text-truncate">
        Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.
      </div>
    </div>
    <!-- Inline level -->
    <span
      class="d-inline-block text-truncate"
      style="max-width: 150px;"
    >
      Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.
    </span>
  </div>
</template>

文本转换

文本 capitalization 类可以转换文字的大小写。

template

<template>
  <div>
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">CapiTaliZed text.</p>
  </div>
</template>

使用 text-transform 来达到文本的破坏和移除的效果也是有可能的。在第一个例子中，text-transform: uppercase 这个自定义类被覆盖，允许保留文本框。在第二个例子中，我们将一个较长的单词分离以适应可用的空间。

template style

<template>
  <div>
    <p class="custom-transform-class text-none">Random TEXT cApitaLization</p>
    <p
      class="text-break"
      style="max-width: 4rem;"
    >
      SUBDERMATOGLYPHIC
    </p>
  </div>
</template>

<style lang="sass">
  .custom-transform-class
    text-transform: uppercase
</style>

字体宽度和斜体

Material design 默认支持 100, 300, 400, 500, 700, 900 字体宽度和斜体文本。

template

<template>
  <div>
    <p class="font-weight-black">Black text.</p>
    <p class="font-weight-bold">Bold text.</p>
    <p class="font-weight-medium">Medium weight text.</p>
    <p class="font-weight-regular">Normal weight text.</p>
    <p class="font-weight-light">Light weight text.</p>
    <p class="font-weight-thin">Thin weight text.</p>
    <p class="font-italic">Italic text.</p>
  </div>
</template>

文本不透明度

不透明度助手类允许你轻松地调整文本的重点。text---primary 与默认文本的不透明度相同。text---secondary 用于提示和辅助文本。使用 text----disabled 来取消文本的强调。

template

<template>
  <div>
    <p class="text--primary">High-emphasis has an opacity of 87%.</p>
    <p class="text--secondary">Medium-emphasis text and hint text have opacities of 60%.</p>
    <p class="text--disabled">Disabled text has an opacity of 37%.</p>
  </div>
</template>

RTL 对齐

使用 RTL 时，无论使用 rtl 的指定如何，都可能希望保持对齐。 可以使用以下格式的文本对齐帮助程序类来实现此目的：text-<breakpoint>-<direction>，其中断点可以是 sm, md, lg, 或 xl ，而方向可以是 left 或 right。 您可能还希望对齐以创建响应式 rtl，这可以使用方向 start 和 end 来完成。

template

<template>
  <div>
    <p class="subtitle-2 text-center">Agnostic RTL Alignment</p>
    <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider for rtl or ltr.</p>
    <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider for rtl or ltr.</p>
    <p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider for rtl or ltr.</p>
    <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider for rtl or ltr.</p>
    <p class="subtitle-2 text-center">Responsive RTL Alignment</p>
    <p class="text-start">Left aligned text on ltr and right aligned on rtl.</p>
    <p class="text-end">Right aligned text on ltr and left aligned on rtl.</p>
  </div>
</template>