Skip to content

Commit 967baaa

Browse files
rachelandrewrachelandrew
committed
Some CSS text examples
1 parent 8b7b335 commit 967baaa

9 files changed

+468
-0
lines changed

‎css-text/inline-overflow-hidden.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Inline overflow</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
border: 4px solid #f76707;
14+
border-radius: 5px;
15+
padding: 10px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box {
21+
inline-size: 150px;
22+
overflow: hidden;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<section class="preview">
29+
<div class="box">
30+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
31+
</div>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 100px;">
35+
.box {
36+
inline-size: 150px;
37+
overflow: hidden;
38+
}
39+
</textarea>
40+
41+
<textarea class="playable playable-html" style="height: 150px;">
42+
<div class="box">
43+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
44+
</div>
45+
</textarea>
46+
47+
<div class="playable-buttons">
48+
<input id="reset" type="button" value="Reset" />
49+
</div>
50+
</body>
51+
<script src="playable.js"></script>
52+
</html>

‎css-text/inline-overflow.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Inline overflow</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
border: 4px solid #f76707;
14+
border-radius: 5px;
15+
padding: 10px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box {
21+
inline-size: 150px;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 100px;">
34+
.box {
35+
inline-size: 150px;
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 150px;">
40+
<div class="box">
41+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
42+
</div>
43+
</textarea>
44+
45+
<div class="playable-buttons">
46+
<input id="reset" type="button" value="Reset" />
47+
</div>
48+
</body>
49+
<script src="playable.js"></script>
50+
</html>

‎css-text/min-content.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Inline overflow</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
border: 4px solid #f76707;
14+
border-radius: 5px;
15+
padding: 10px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box {
21+
inline-size: min-content;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 100px;">
34+
.box {
35+
inline-size: min-content;
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 150px;">
40+
<div class="box">
41+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
42+
</div>
43+
</textarea>
44+
45+
<div class="playable-buttons">
46+
<input id="reset" type="button" value="Reset" />
47+
</div>
48+
</body>
49+
<script src="playable.js"></script>
50+
</html>

‎css-text/overflow-wrap.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>overflow-wrap</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
border: 4px solid #f76707;
14+
border-radius: 5px;
15+
padding: 10px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box {
21+
inline-size: 150px;
22+
overflow-wrap: break-word;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<section class="preview">
29+
<div class="box">
30+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
31+
</div>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 100px;">
35+
.box {
36+
inline-size: 150px;
37+
overflow-wrap: break-word;
38+
}
39+
</textarea>
40+
41+
<textarea class="playable playable-html" style="height: 150px;">
42+
<div class="box">
43+
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
44+
</div>
45+
</textarea>
46+
47+
<div class="playable-buttons">
48+
<input id="reset" type="button" value="Reset" />
49+
</div>
50+
</body>
51+
<script src="playable.js"></script>
52+
</html>

‎css-text/playable.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var section = document.querySelector('section');
2+
var editable = document.querySelector('.editable');
3+
var textareaHTML = document.querySelector('.playable-html');
4+
var textareaCSS = document.querySelector('.playable-css');
5+
var reset = document.getElementById('reset');
6+
var htmlCode = textareaHTML.value;
7+
var cssCode = textareaCSS.value;
8+
9+
function fillCode() {
10+
editable.innerHTML = textareaCSS.value;
11+
section.innerHTML = textareaHTML.value;
12+
}
13+
14+
reset.addEventListener('click', function () {
15+
textareaHTML.value = htmlCode;
16+
textareaCSS.value = cssCode;
17+
fillCode();
18+
});
19+
20+
textareaHTML.addEventListener('input', fillCode);
21+
textareaCSS.addEventListener('input', fillCode);
22+
window.addEventListener('load', fillCode);

‎css-text/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Some default styling for cookbook examples */
2+
/*
3+
rgb(53,43,34)
4+
rgb(75,70,74)
5+
rgb(95,97,110)
6+
rgb(137,151,188)
7+
rgb(160,178,226)
8+
*/
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
/* styles for the editor */
18+
19+
.playable {
20+
font-family: monospace;
21+
display: block;
22+
margin-bottom: 10px;
23+
background-color: #F4F7F8;
24+
border: none;
25+
border-left: 6px solid #558ABB;
26+
color: #4D4E53;
27+
width: 90%;
28+
max-width: 700px;
29+
padding: 10px 10px 0px;
30+
font-size: 90%;
31+
}
32+
33+
.playable-css {
34+
height: 80px;
35+
}
36+
37+
.playable-html {
38+
height: 160px;
39+
}
40+
41+
.playable-buttons {
42+
text-align: right;
43+
width: 90%;
44+
max-width: 700px;
45+
padding: 5px 10px 5px 26px;
46+
font-size: 100%;
47+
}
48+
49+
.preview {
50+
width: 90%;
51+
max-width: 700px;
52+
border: 1px solid #4D4E53;
53+
border-radius: 2px;
54+
padding: 10px 14px 10px 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
.preview input {
59+
display: block;
60+
margin: 5px;
61+
}

‎css-text/wbr.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>The &lt;wbr&gt; element</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
border: 4px solid #f76707;
14+
border-radius: 5px;
15+
padding: 10px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box {
21+
inline-size: 150px;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
Llanfair<wbr>pwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 100px;">
34+
.box {
35+
inline-size: 150px;
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 150px;">
40+
<div class="box">
41+
Llanfair<wbr>pwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
42+
</div>
43+
</textarea>
44+
45+
<div class="playable-buttons">
46+
<input id="reset" type="button" value="Reset" />
47+
</div>
48+
</body>
49+
<script src="playable.js"></script>
50+
</html>

0 commit comments

Comments
 (0)