Read More Without JavaScript

<div class="ui-more">
  <p>Building a website for visitors in mainland China? Three technical decisions matter long before any SEO work starts: where the site is hosted, which fonts it loads, and which third-party scripts it depends on.</p>
  <details class="ui-more__details">
    <summary class="ui-more__button">
      <span class="ui-more__open">Read more</span>
      <span class="ui-more__close">Show less</span>
    </summary>
    <p><strong>Hosting.</strong> A server outside China can be slow or unreliable for Chinese visitors. Hosting inside mainland China requires an ICP filing for the domain.</p>
    <p><strong>Fonts.</strong> Google Fonts is not reliably reachable from mainland China. System fonts such as PingFang SC and Microsoft YaHei load instantly.</p>
    <p><strong>Scripts.</strong> Google Maps, reCAPTCHA and YouTube embeds don't work in mainland China — and if a page waits for them, it may not load at all.</p>
    <p><a href="/tools/chinese-filler-text/#build-for-baidu">See the full build checklist for Baidu</a></p>
  </details>
</div>

/* "Read more" with <details> — no JavaScript.
   The first paragraph is always visible; the rest sits in a
   native <details> element. Button text switches with CSS. */
.ui-more {
  --ui-text: #1b1f3b;
  --ui-muted: #4b5070;
  --ui-accent: #4f46e5;
  font: 400 1rem/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ui-muted);
}
.ui-more p {
  margin: 0 0 0.9rem;
}
.ui-more strong {
  color: var(--ui-text);
}
.ui-more a {
  color: var(--ui-accent);
  font-weight: 600;
}

/* The button */
.ui-more__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  color: var(--ui-accent);
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* no default triangle */
}
.ui-more__button::-webkit-details-marker {
  display: none;
}
.ui-more__button::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.ui-more__button:hover {
  text-decoration: underline;
}
.ui-more__button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Real text in the HTML for both states — screen readers read the right one */
.ui-more__close {
  display: none;
}
.ui-more__details[open] .ui-more__open {
  display: none;
}
.ui-more__details[open] .ui-more__close {
  display: inline;
}
.ui-more__details[open] > .ui-more__button::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

<div class="ui-clamp">
  <input class="ui-clamp__toggle" type="checkbox" id="ui-clamp-1">
  <p class="ui-clamp__text">A complete Chinese web font contains well over 20,000 characters and often weighs several megabytes — far too much for a fast page, especially on mobile networks. But a typical website uses only a few thousand different characters. Font subsetting keeps exactly those and drops the rest, which turns a multi-megabyte file into a few hundred kilobytes. Paste your site's text into our free subset generator and it lists the characters, gives you the commands to cut the font, and writes the @font-face CSS — including a fallback for characters you add later.</p>
  <label class="ui-clamp__button" for="ui-clamp-1">
    <span class="ui-clamp__open">Read more</span>
    <span class="ui-clamp__close">Show less</span>
  </label>
  <p><a href="/tools/chinese-font-subset/">Open the Chinese Font Subset Generator</a></p>
</div>

/* "Read more" as a preview — no JavaScript.
   The paragraph is cut after 3 lines with "…";
   a checkbox removes the limit. */
.ui-clamp {
  --ui-text: #1b1f3b;
  --ui-muted: #4b5070;
  --ui-accent: #4f46e5;
  position: relative; /* keeps the hidden checkbox inside */
  font: 400 1rem/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ui-muted);
}
.ui-clamp p {
  margin: 0 0 0.9rem;
}
.ui-clamp a {
  color: var(--ui-accent);
  font-weight: 600;
}

/* Collapsed: 3 lines */
.ui-clamp__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Visually hidden checkbox — still reachable by keyboard */
.ui-clamp__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-clamp__toggle:checked ~ .ui-clamp__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

/* The button */
.ui-clamp__button {
  display: inline-block;
  margin: 0 0 0.9rem;
  color: var(--ui-accent);
  font-weight: 600;
  cursor: pointer;
}
.ui-clamp__button:hover {
  text-decoration: underline;
}
.ui-clamp__toggle:focus-visible ~ .ui-clamp__button {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.ui-clamp__close,
.ui-clamp__toggle:checked ~ .ui-clamp__button .ui-clamp__open {
  display: none;
}
.ui-clamp__toggle:checked ~ .ui-clamp__button .ui-clamp__close {
  display: inline;
}