SparingSoftware / v-clamp
Projects that are alternatives of or similar to v-clamp
Vue directive plugin for text truncate. Plugin cuts too long text and replace it with ellipsis.
Install package in your project
Basic config in Vue app by global import plugin in main.js file
All you need to do is add v-clamp directive to element on which you want to ellipsis overflow and specify its height or max-height style property.
Look at the example below:
Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!
V-clamp :speech_balloon:
Vue directive plugin for text truncate. Plugin cuts too long text and replace it with ellipsis.
How to use
Installation
Install package in your project
Configuration
Basic config in Vue app by global import plugin in main.js file
Implementation
All you need to do is add v-clamp directive to element on which you want to ellipsis overflow and specify its height or max-height style property.
Look at the example below:
Contributing
Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!
Truncate Text Easily in Your Vue.js App with Vue-Clamp
Long text often needs to be truncated to fit on the browser window. You can do that with CSS or JavaScript. However, there’s no quick solution with CSS. With CSS, you have to do something like:
This does not let you control how many lines of text you want to show, so we need a better solution. The Vue-Clamp package lets us truncate text to display the number of lines that we want. It updates automatically when you resize the window so you always get the number of lines displayed that you specify.
In this article, we will make a note taking app that lets users write notes, save them, and delete them. In the home page, we will use Vue-Clamp to truncate the text to only display the first 3 lines. There will be an edit form where the full text is displayed.
We start by creating the new project. To start, we run Vue CLI to create the project files. We run npx @vue/cli create note-app to start the wizard. Then in the wizard, we select ‘Manually select features’, and select Babel, CSS preprocessor, Vuex, and Vue Router.
Next, we install some packages. We need Axios to make HTTP requests to our back end, Bootstrap-Vue for styling, Vee-Validate for form validation, and Vue-Clamp for the text truncation. To install the packages, we run npm i axios bootstrap-vue vee-validate vue-clamp . After installing the packages we can start building our note-taking app.
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Vue directive plugin for text truncate
License
sparingsoftware/v-clamp
Name already in use
- Local
- Codespaces
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Vue directive plugin for text truncate. Plugin cuts too long text and replace it with ellipsis.
Install package in your project
Basic config in Vue app by global import plugin in main.js file
All you need to do is add v-clamp directive to element on which you want to ellipsis overflow and specify its height or max-height style property.
Look at the example below:
Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!