Porsche Design System

Text

Table of Contents

Size
Semantics
Hyphens

Size#

There are predefined fluid text sizes for the text component which should cover most use cases. If a specific text size is needed, the size can be set to inherit to specify the text size from outside.

The quick brown fox jumps over the lazy dog

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text class="text-[3rem]" size="inherit">
  The quick brown fox jumps over the lazy dog
</p-text>
<script>

</script>
</body>
</html>

Responsive

The quick brown fox jumps over the lazy dog

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text size="{'base': 'small', 'l': 'medium'}">
  The quick brown fox jumps over the lazy dog
</p-text>
<script>

</script>
</body>
</html>

Semantics#

To provide more contextual HTML semantics you can either pass them with the tag property or directly inside a slot.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text tag="blockquote">
  The quick brown fox jumps over the lazy dog
</p-text>

<p-text>
  <blockquote>
    The quick brown fox jumps over the lazy dog
  </blockquote>
</p-text>
<script>

</script>
</body>
</html>

Hyphens#

By default, the p-text component has hyphens set to auto, but this can be overridden using the --p-hyphens CSS variable. When inserting manual hyphens, you can choose to use soft hyphens. For example, extraordinarily, as shown in the second example.

However, please note that hyphenation behavior can vary depending on the browser and the language of the text. In some cases, it may be necessary to set the appropriate lang attribute on your HTML element to ensure that hyphenation works correctly for the desired language.

An extraordinarily Porsche

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="w-25 flex flex-col gap-fluid-sm">
  <p-text>
    An extraordinarily Porsche
  </p-text>
  <p-text style="--p-hyphens: manual">
    An extraordinarily Porsche
  </p-text>
  <p-text style="--p-hyphens: none">
    An extraordinarily Porsche
  </p-text>
</div>
<script>

</script>
</body>
</html>