HTML-Renderer/Source/Demo/Common/TestSamples/15.MaxWidth.htm at f2169d38c53e665b49479c8f4e8e581b444ad0e7 · ArthurHub/HTML-Renderer · GitHub

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
33
34
35
36
<html>
    <body>
        <div>
            <h2>
                Line that cannot be splitted</h2>
            <p>
                <div>The text should not exceed max width:</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis
                elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend
                libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna.
                Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis
                egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat
                metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
            </p>
            <p>
                <div>Long line without whitespaces:</div>
                <span color="red">https://www.google.com/sjkdhgfasdfgfg/asdfadfsgaefg/adfgafdgadfg/asdfgaedfgsdfg/dasfgasfdgasdfg/adfgadfgasfdg/adfsgafgafg/afdgaddfgadfg/afsdgafdgaddfg/afsdgafgadqfdgaeddfg/afsdgadfgafg</span>
            </p>
            <p>
                <div>The text should not exceed max width:</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis
                elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend
                libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna.
                Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis
                egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat
                metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
            </p>
            <div>The image should also be limited by size because it has: <code><span color="red">style</span><span color="blue">="</span><span color="maroon">width</span><span color="blue">:90%"</span></code></div>
            <img style="width: 90%" src="https://images.pexels.com/photos/160755/kittens-cats-foster-playing-160755.jpeg?w=1280&h=856"/>
            <img style="width: 500px; max-width: 90%" src="https://images.pexels.com/photos/160755/kittens-cats-foster-playing-160755.jpeg?w=1280&h=856"/>
            <p style="margin: 0 200px">
                <img style="width: 500px; max-width: 90%" src="https://images.pexels.com/photos/160755/kittens-cats-foster-playing-160755.jpeg?w=1280&h=856"/>
            </p>
        </div>
    </body>
</html>