Skip to content

Commit 13affb7

Browse files
bennadelbennadel
committed
Add center text-overflow ellipsis in Angular 7.2.15.
1 parent 51ab4c0 commit 13affb7

25 files changed

Lines changed: 7543 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/center-ellipsis-angular7/)
1314
* [Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox2/)
1415
* [Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox/)
1516
* [Managing Confirm And Prompt Modals Outside Of The Router In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/prompt-service-angular7/)

‎demos/center-ellipsis-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/center-ellipsis-angular7/app/app.component.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.item {
8+
margin: 10px 0px 10px 20px ;
9+
}

‎demos/center-ellipsis-angular7/app/app.component.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<h2>
14+
User-Provided Project Names
15+
</h2>
16+
17+
<p *ngFor="let projectName of projects" class="item">
18+
19+
<app-smart-shrink
20+
[text]="projectName">
21+
</app-smart-shrink>
22+
23+
</p>
24+
`
25+
})
26+
export class AppComponent {
27+
28+
public projects: string[];
29+
30+
// I initialize the app component.
31+
constructor() {
32+
33+
this.projects = [
34+
"This is a really long project name over here",
35+
"I am also quite long in my own right, not to be outdone",
36+
"This is my long long long long project name",
37+
"I am short",
38+
"I am tiny",
39+
"I am the craziest project name that you have ever seen in your whole life - no one does this!"
40+
];
41+
42+
}
43+
44+
}

‎demos/center-ellipsis-angular7/app/app.module.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
import { SmartShrinkComponent } from "./smart-shrink.component";
9+
10+
// ----------------------------------------------------------------------------------- //
11+
// ----------------------------------------------------------------------------------- //
12+
13+
@NgModule({
14+
imports: [
15+
BrowserModule
16+
],
17+
declarations: [
18+
AppComponent,
19+
SmartShrinkComponent
20+
],
21+
bootstrap: [
22+
AppComponent
23+
]
24+
})
25+
export class AppModule {
26+
// ...
27+
}

‎demos/center-ellipsis-angular7/app/main.htm‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15
8+
</title>
9+
10+
<style type="text/css">
11+
/* Using this to make resizing the demo less distracting. */
12+
h1,
13+
h2 {
14+
overflow: hidden ;
15+
white-space: nowrap ;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<h1>
22+
Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15
23+
</h1>
24+
25+
<my-app>
26+
<p>
27+
<em>Loading files...</em>
28+
</p>
29+
30+
<p>
31+
npm Run Scripts:
32+
</p>
33+
34+
<ul>
35+
<li>
36+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
37+
</li>
38+
<li>
39+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
40+
</li>
41+
</ul>
42+
</my-app>
43+
44+
</body>
45+
</html>

‎demos/center-ellipsis-angular7/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/es";
4+
import "zone.js/dist/zone.js";

‎demos/center-ellipsis-angular7/app/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Import the core angular services.
3+
import { enableProdMode } from "@angular/core";
4+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
5+
6+
// Import the root module for bootstrapping.
7+
import { AppModule } from "./app.module";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
// NOTE: This ENV value is being provided by Webpack's DefinePlugin. It is populated
13+
// on the mode in which the webpack-cli was invoked.
14+
if ( process.env.NODE_ENV === "production" ) {
15+
16+
enableProdMode();
17+
18+
}
19+
20+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/center-ellipsis-angular7/app/smart-shrink.component.less‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
:host {
3+
display: flex ;
4+
}
5+
6+
.left {
7+
// The left side CANNOT GROW, it can ONLY SHRINK (and add an ellipsis at the end).
8+
flex: 0 1 auto ;
9+
overflow: hidden ;
10+
text-overflow: ellipsis ;
11+
white-space: pre ;
12+
}
13+
14+
.right {
15+
// The right side can grow, but NOT SHRINK.
16+
flex: 1 0 auto ;
17+
overflow: hidden ;
18+
white-space: pre ;
19+
}

‎demos/center-ellipsis-angular7/app/smart-shrink.component.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
// Import the core angular services.
3+
import { ChangeDetectionStrategy } from "@angular/core";
4+
import { Component } from "@angular/core";
5+
6+
// ----------------------------------------------------------------------------------- //
7+
// ----------------------------------------------------------------------------------- //
8+
9+
@Component({
10+
selector: "app-smart-shrink",
11+
inputs: [ "text" ],
12+
host: {
13+
"[title]": "fullText"
14+
},
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
styleUrls: [ "./smart-shrink.component.less" ],
17+
template:
18+
`
19+
<span class="left" [innerText]="leftText"></span>
20+
<span class="right" [innerText]="rightText"></span>
21+
`
22+
})
23+
export class SmartShrinkComponent {
24+
25+
public fullText: string;
26+
public leftText: string;
27+
public rightText: string;
28+
29+
// I initialize the smart-shrink component.
30+
constructor() {
31+
32+
this.leftText = "";
33+
this.rightText = "";
34+
35+
}
36+
37+
// ---
38+
// PUBLIC METHODS.
39+
// ---
40+
41+
// I handle the setting of the "text" input binding.
42+
set text( value: string ) {
43+
44+
// We're going to split the string towards the end. This is just a judgment call.
45+
// Since we can't dynamically change the split as the container changes size (at
46+
// least, not with a lot more work), we have to pick a location that scales the
47+
// ellipsis well.
48+
var splitIndex = Math.round( value.length * 0.75 );
49+
50+
this.fullText = value;
51+
this.leftText = value.slice( 0, splitIndex );
52+
this.rightText = value.slice( splitIndex );
53+
54+
}
55+
56+
}

0 commit comments

Comments
 (0)