css-reference/property/max-width/index.html at master · elisescu/css-reference · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
---
layout: single
property_name: max-width
---

<section id="max-width" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/max-width/" data-property-name="max-width" data-tooltip="Single page for this property" target="_blank">Link</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="max-width">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/max-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="{{site.url}}/#max-width"><span>#</span>max-width</a>
    </h2>
    <div class="property-description">
      <p>Defines the maximum width the element can be.</p>

    </div>

  </header>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="max-width: none;">max-width: none;</code>
        </p>
        <div class="example-description">
          <p>The element has <strong>no limit</strong> in terms of width.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div max-width " id="max-width-none"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="max-width: 2000px;">max-width: 2000px;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p>
<p>If the <em>maximum</em> width is <strong>larger</strong> than the element&#39;s <em>actual</em> width, the max width has <strong>no effect</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div max-width " id="max-width-2000px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="max-width: 150px;">max-width: 150px;</code>
        </p>
        <div class="example-description">
          <p>If the content does not fit within the maximum width, it will automatically change the <strong>height</strong> of the element to accomodate for the wrapping of the content.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div max-width " id="max-width-150px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
        <style type="text/css">#max-width-150px .block { max-width: 150px; }</style>
    </section>

</section>