Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 13affb7

Browse filesBrowse files
bennadelbennadel
committed
Add center text-overflow ellipsis in Angular 7.2.15.
1 parent 51ab4c0 commit 13affb7
Copy full SHA for 13affb7
Expand file treeCollapse file tree

25 files changed

+7543
-0
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
  • Display the source diff
  • Display the rich diff
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/)
Collapse file

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

Copy file name to clipboard
+4Lines 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/
Collapse file

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

Copy file name to clipboard
+9Lines 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+
}
Collapse file

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

Copy file name to clipboard
+44Lines 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+
}
Collapse file

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

Copy file name to clipboard
+27Lines 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+
}
Collapse file

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

Copy file name to clipboard
+45Lines 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>
Collapse file

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

Copy file name to clipboard
+4Lines 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";
Collapse file

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

Copy file name to clipboard
+20Lines 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 );
Collapse file

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

Copy file name to clipboard
+19Lines 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+
}
Collapse file

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

Copy file name to clipboard
+56Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.