Skip to main content

Return to Answer

Embed solution in stackoverflow so users can run, style headings, wrap examples with resizable divs to allow testing.
Source Link
edit approved Jun 13, 2020 at 11:54
ADJenks
edit approved Jun 13, 2020 at 11:54
ADJenks
  • 3.5k
  • 31
  • 44

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>

Solution with SVG:

https://jsfiddle.net/qc8ht5eb/

.resizeme { resize: both; margin: 0; padding: 0; height: 75px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" style="background-color:green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <text x="0" y="75" font-size="75" fill="black" >█Resize This█</text> </svg> </div>

Solution with SVG and text-wrapping using foreignObject:

 

<svg viewBox="0 0 100 100"> <foreignObject width="100%" height="100%"> <h1>heading</h1> lorem ipsum dolor sit amet </foreignObject> </svg>

Solution with SVG and text-wrapping using foreignObject:

https://jsfiddle.net/2rp1q0sy/

.resizeme { resize: both; margin: 0; padding: 0; height: 200px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 200" preserveAspectRatio="xMinYMin meet" > <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;"> <h1>heading</h1> <p>Resize the blue box.</p> </div> </foreignObject> </svg> </div>

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>

https://jsfiddle.net/qc8ht5eb/

Solution with SVG and text-wrapping using foreignObject:

<svg viewBox="0 0 100 100"> <foreignObject width="100%" height="100%"> <h1>heading</h1> lorem ipsum dolor sit amet </foreignObject> </svg>

https://jsfiddle.net/2rp1q0sy/

Solution with SVG:

.resizeme { resize: both; margin: 0; padding: 0; height: 75px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" style="background-color:green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <text x="0" y="75" font-size="75" fill="black" >█Resize This█</text> </svg> </div>
 

Solution with SVG and text-wrapping using foreignObject:

.resizeme { resize: both; margin: 0; padding: 0; height: 200px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 200" preserveAspectRatio="xMinYMin meet" > <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;"> <h1>heading</h1> <p>Resize the blue box.</p> </div> </foreignObject> </svg> </div>

add example demonstrating text-wrapping
Source Link
edit approved Apr 23, 2019 at 19:02
Larry
edit approved Apr 23, 2019 at 19:02
Larry
  • 1.2k
  • 2
  • 20
  • 25

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>

https://jsfiddle.net/qc8ht5eb/

Solution with SVG and text-wrapping using foreignObject:

<svg viewBox="0 0 100 100"> <foreignObject width="100%" height="100%"> <h1>heading</h1> lorem ipsum dolor sit amet </foreignObject> </svg>

https://jsfiddle.net/2rp1q0sy/

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>

https://jsfiddle.net/qc8ht5eb/

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>

https://jsfiddle.net/qc8ht5eb/

Solution with SVG and text-wrapping using foreignObject:

<svg viewBox="0 0 100 100"> <foreignObject width="100%" height="100%"> <h1>heading</h1> lorem ipsum dolor sit amet </foreignObject> </svg>

https://jsfiddle.net/2rp1q0sy/

fixed formatting
Source Link
eatonphil
eatonphil
  • 13.9k
  • 30
  • 81
  • 141

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   <text font-size="300" fill="black">Text</text>  </svg> </div>
  

https://jsfiddle.net/qc8ht5eb/

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg>
 

https://jsfiddle.net/qc8ht5eb/

Solution with SVG:

<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   <text font-size="300" fill="black">Text</text>  </svg> </div>
 

https://jsfiddle.net/qc8ht5eb/

Source Link
Dantio
Dantio
  • 2.3k
  • 1
  • 13
  • 18