Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
ui-components
ui-components
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 29
    • Issues 29
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 4
    • Merge Requests 4
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • linguala
  • ui-componentsui-components
  • Issues
  • #73

Closed
Open
Opened Jul 26, 2020 by Tobias Thüring@tth💬Owner0 of 2 tasks completed0/2 tasks

Multiline Text ellipsis component

Hide description content (not just single line, but multiline)

image

Requirements:

  • add story with different examples
    • different amount of lines
    • different amount of words
    • maybe different orientation (Left to right / right to left)?
  • Use only CSS if possible. (Multiline css is a bit complicated, use a pre-existing node module (maybe https://reactjsexample.com/cross-browser-multiline-text-ellipsis-for-react/ ?) or something proven to work in all browsers with least amount of javascript)

Needed props:

  • description: Text with possibly very long content
  • locShowMore: localized "show more" string, which should be passed from outside (do not hardcode values!)
  • (optional): how many lines should be allowed
  • (optional): expansion handler

Functionality:

  • If description text has many characters/words, have a way to set text ellipsis on multiple lines. Show only x amount of words or characters on default render
  • Allow to show whole description on clicking or touching "Show more" text.
Edited Jul 26, 2020 by Tobias Thüring
Assignee
Assign to
Marktplatz: Agentur 3. Öffentlich sichtbarer Marktplatz
Milestone
Marktplatz: Agentur 3. Öffentlich sichtbarer Marktplatz
Assign milestone
Time tracking
None
Due date
None
Reference: linguala/ui-components#73