@chitovas/ngx-clamp 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# @chitovas/ngx-clamp
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
[](https://www.npmjs.com/package/@chitovas/ngx-clamp)
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Welcome to @chitovas/ngx-clamp, an Angular library designed to elegantly manage text overflow within HTML elements. This library allows you to clamp text, adding ellipsis or a truncation text of your choice when the content exceeds a specified height.
|
|
8
|
+
|
|
9
|
+
## Motivation
|
|
10
|
+
|
|
11
|
+
Solves overflow issues on older legacy browsers that don't support the `-webkit-line-clamp` or `line-clamp` property, ensuring consistent behavior across different platforms.
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- **Easy Integration**: Seamlessly integrate `ngx-clamp` directive into your Angular applications to manage text overflow.
|
|
16
|
+
- **Customizable Truncation**: Use ellipsis or specify your own truncation text for clamped content.
|
|
17
|
+
- **Nested Element Support**: Clamp text within nested HTML elements effortlessly.
|
|
18
|
+
- **Height Configuration**: Set a maximum height for text before clamping activates.
|
|
19
|
+
- **Legacy Browser Compatibility**: Solves overflow issues on older browsers that don't support the -webkit-line-clamp property, ensuring consistent behavior across different platforms.
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
Install the package using npm:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @chitovas/ngx-clamp
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { NgxClamp } from '@chitovas/ngx-clamp';
|
|
33
|
+
|
|
34
|
+
@Component({
|
|
35
|
+
selector: 'my-component',
|
|
36
|
+
template: `
|
|
37
|
+
<div ngxClamp [maxHeight]="100" truncationText="...">
|
|
38
|
+
Your long text goes here, and it will be clamped if it exceeds the specified height.
|
|
39
|
+
<p>Your long text goes here in nested element</p>
|
|
40
|
+
</div>
|
|
41
|
+
<div ngxClamp [maxHeight]="150" truncationText="Read more...">
|
|
42
|
+
This is a longer paragraph that will be clamped to fit within the specified height.
|
|
43
|
+
</div>
|
|
44
|
+
`,
|
|
45
|
+
imports: [NgxClamp],
|
|
46
|
+
})
|
|
47
|
+
export class MyComponent {}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## License
|
|
51
|
+
|
|
52
|
+
@chitovas/ngx-clamp is released under the MIT License.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chitovas/ngx-clamp",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"author": "Nigel Mukandi",
|
|
5
5
|
"description": "angular library designed to elegantly manage text overflow within HTML elements. This library allows you to clamp text, adding ellipsis or a truncation text of your choice when the content exceeds a specified height.",
|
|
6
6
|
"repository": {
|