https://github.com/bkwld/vue-balance-text
A Vue directive that implements the "balance-text" package to create line breaks to make each line of text in an element equal.
https://github.com/bkwld/vue-balance-text
directive vue
Last synced: about 1 year ago
JSON representation
A Vue directive that implements the "balance-text" package to create line breaks to make each line of text in an element equal.
- Host: GitHub
- URL: https://github.com/bkwld/vue-balance-text
- Owner: BKWLD
- License: mit
- Created: 2018-04-30T22:24:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-05-01T16:54:45.000Z (about 3 years ago)
- Last Synced: 2025-04-07T17:51:29.514Z (about 1 year ago)
- Topics: directive, vue
- Language: JavaScript
- Homepage:
- Size: 69.3 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-balance-text
A Vue directive that implements [balance-text](https://github.com/adobe-webplatform/balance-text). Here is [their demo page](http://adobe-webplatform.github.io/balance-text/demo/index.html).
## Install
```sh
yarn add vue-balance-text
# or
npm install --save vue-balance-text
```
#### Vue
```js
Vue = require('vue')
Vue.directive('balance-text', require('vue-balance-text'))
```
#### Nuxt
In `nuxt.config.js`:
```js
{
modules: [ 'vue-balance-text/nuxt/module' ]
}
```
## Usage
Use in a Vue template like:
```html
A long title with many words that will wrap to multiple lines
```
When rendering HTML with `v-html`, you need to tell v-balance-text to operate on the children vs on the element it's attached to:
```html
```
## Example
Before:
After:
