OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, underline object, ::cue(u), white-space:
nowrap (cue does not wrap)</title> | 2 <title>Reference for WebVTT rendering, underline object, ::cue(u), white-space:
nowrap (cue does not wrap)</title> |
3 <style> | 3 <style> |
4 html { overflow:hidden } | 4 html { overflow:hidden } |
5 body { margin:0 } | 5 body { margin:0 } |
6 .video { | 6 .video { |
7 display: inline-block; | 7 display: inline-block; |
8 width: 1280px; | 8 width: 320px; |
9 height: 720px; | 9 height: 180px; |
10 font-size: 36px; | 10 font-size: 9px; |
11 position: relative; | 11 position: relative; |
12 overflow: hidden; | 12 overflow: hidden; |
13 } | 13 } |
14 .cue { | 14 .cue { |
15 position: absolute; | 15 position: absolute; |
16 bottom: 0; | 16 bottom: 0; |
17 left: 25%; | 17 left: 25%; |
18 right: 0; | 18 right: 0; |
19 width: 50%; | 19 width: 50%; |
20 text-align: center; | 20 text-align: center; |
21 } | 21 } |
22 .cue > span { | 22 .cue > span { |
23 font-family: sans-serif; | 23 font-family: sans-serif; |
24 background: rgba(0,0,0,0.8); | 24 background: rgba(0,0,0,0.8); |
25 color: white; | 25 color: white; |
26 text-decoration: underline; | 26 text-decoration: underline; |
27 white-space: nowrap | 27 white-space: nowrap |
28 } | 28 } |
29 </style> | 29 </style> |
30 <div class="video"><span class="cue"><span>This is a test subtitle that most lik
ely will span over several rows since it's a pretty long cue with a lot of t
ext.</span></span></div> | 30 <div class="video"><span class="cue"><span>This is a test subtitle that most lik
ely will span over several rows since it's a pretty long cue with a lot of t
ext.</span></span></div> |
OLD | NEW |