blob: 3aab1c6510898c5d78c8916e6e8e1b7d9dc10060 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<style>
#one {
width: 10ch;
max-width: 2ch;
background-color: blue;
}
#two {
width: 10ch;
max-width: 2ch;
background-color: red;
display: inline-block;
}
#three {
width: 10ch;
max-width: 2ch;
background-color: green;
display: block;
}
#four {
width: fit-content(5ch);
background-color: purple;
max-width: 3ch;
}
</style>
<div id=one>
<span><span>This box should have a 2ch wide blue background and should wrap on every word.</span></span>
</div>
<div id=two>x</div>This text should be displayed after a 2ch wide red box.
<div id=three><div>This text should have a 2ch wide green background and should wrap on every word.</div></div>
<div id=four>II</div>
<div style="background: red; min-width: 30ch; max-width: 1ch">min-width beats max-width</div>
|