Member Avatar for Jdsiteworks

example: daniweb is very useful webs(read more) or (...) at the end

whole message is: daniweb is very useful website.


please help thank you in advance.:)

  • 3 Contributors
  • 2 Replies
  • 90 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by codemonkey88

Dani AI

Generated

Short practical options to add "read more" or an ellipsis at the end of preview text. asked for the behavior, mentioned a client-side plugin and showed a simple PHP trim. Below are modern, safer alternatives (CSS-only, accessible HTML, and server-side) and quick troubleshooting notes.

CSS (visual only)
Use single-line ellipsis for inline snippets and a -webkit- line-clamp technique for limited multi-line previews. These are purely visual (content still in DOM).

.ellipsis-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

See text-overflow on MDN and line-clamp on MDN for support notes.

Server-side (reliable, SEO-friendly)
When truncating on the server, strip HTML first, use multibyte-safe functions, and cut on a word boundary to avoid mid-word ellipses. Example approach uses strip_tags, mb_substr, mb_strlen and a small regex to drop a trailing partial word. See mb_substr documentation.

Accessible expand/collapse
For a keyboard- and screen-reader-friendly "read more", prefer the native <details>/<summary> element or implement a toggle button with aria-expanded. The WAI-ARIA disclosure example shows recommended patterns: https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html

Troubleshooting tips

  • If HTML fragments break, truncate with a DOM parser (e.g., PHP DOMDocument) instead of naive string cuts (DOMDocument docs).
  • Use server-side truncation for feeds/SEO, CSS-only when you only need a visual clip.
  • Test on mobile and with long words/unicode; use multibyte functions and word-boundary trimming to avoid ugly breaks.

Recommended Answers

All 2 Replies

Member Avatar for veedeoo

Hi,

You can read more about it ..

Member Avatar for codemonkey88

or, if you want the php, try something like
$text = "daniweb is very useful website.";
$text = substr($text, 0, 10);
$text = $text." (...)";
echo $text;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.