How to align text like a trapezoid?
Here is a sample html code
<div style="width:100px;height:100px">
12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345
</div>
And I want the effect to be as follows:
12345 1234 1234
1234 1234 123
12345 1234
1234 1234
123 1234
12345
or
12345
123 1234
1234 1234
12345 1234
1234 1234 123
12345 1234 1234
or
12345 1234 12345
1234 1234 235
12345 123 1234
1234 123 212
123 1234 12
1234 12345
I tried using text-align, but the result was not expected.
How can I make this effect without adding many of <br>and $nbsp, or adding many of the <div style="margin...">hard code?
Thank.
How can I make this effect without adding many of
<br>and, or adding many of the<div style="margin...">hard code?
You can not. The same applies to the shape in the shape of a heart, the shape of a giraffe, etc. The DOM elements are pretty rectangular.
You should do something like Javscript. You are not very accurate about the requirements (monospace font, keeping words together, etc.), but here is one example.
<div id="trapezoid" style="width:100px;height:100px"></div>
<script>
var data = '12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345';
var lines = [];
data.split(' ').reduce(function(str, word, i, array) {
str += word;
if(lines.length === 0 || str.length > lines[lines.length-1].length || i === array.length - 1) {
lines.push(str);
return '';
}
return str;
}, '');
document.getElementById('trapezoid').innerHTML = lines.join('<br>');
</script>
, , , CSS, CSS Shape Modules ".
Chrome CSS (Chrome 20+), :// Experimental Web Platform. :
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Exclusions - Shape inside</title>
<meta charset="UTF-8">
<style type="text/css">
#trapezoid {
float: center;
margin-top: 1em;
width: 60em;
height: 30em;
-webkit-hyphens: auto;
-webkit-shape-inside: polygon(0 0, 15% 0, 10% 20%, 0 20%);
overflow: hidden;
}
</style>
</head>
<body>
<div id="trapezoid">
12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345
</div>
</body>
</html>
:
: http://adobe.imtqy.com/web-platform/samples/css-exclusions/basic/shape-inside-simple.html