javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(label): text overflow for slotted headings (#20690)

Browse Source 
fixes #17087
This commit is contained in:
Simon Hänisch
2020-03-11 17:42:46 +01:00
committed by GitHub
parent d53595eb16
commit 4d34ce6a31
3 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/label/label.scss
View File

@ -79,3 +79,17 @@
:host(.label-no-animate.label-floating) {
transition: none;
}
// Headings
// --------------------------------------------------
::slotted(*) h1,
::slotted(*) h2,
::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
text-overflow: inherit;
overflow: inherit;
}

10
core/src/components/label/test/headings/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('label: headings', async () => {
const page = await newE2EPage({
url: '/src/components/label/test/headings?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

70
core/src/components/label/test/headings/index.html Normal file
View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Label - Headings</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Label - Headings</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</p>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">
<h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>