| <!DOCTYPE html> |
| <!-- |
| | Calculation of the shrink-to-fit width is roughly this: calculate |
| | the preferred width by formatting the content without breaking lines other |
| | than where explicit line breaks occur, and also calculate the preferred |
| | minimum width, e.g., by trying all possible line breaks. Thirdly, find |
| | the available width: the width of the containing block minus the used values |
| | of "margin-left", "border-left-width", "padding-left", "padding-right", |
| | "border-right-width", "margin-right". |
| | https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width |
| | https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| font-size: 40px; |
| font-weight: bold; |
| } |
| .min-preferred-width { |
| /* TODO: Replace rulers with border: 5px solid #00b0ff; */ |
| /* TODO: Replace spacers with margin: 10px; */ |
| width: 100px; |
| } |
| .preferred-width { |
| width: 400px; |
| } |
| .available-width { |
| width: 200px; |
| } |
| .outer-inline-block { |
| display: inline-block; |
| } |
| .inline-block { |
| background-color: #0091ea; |
| color: #fff; |
| display: inline-block; |
| } |
| .ruler { |
| background-color: #00b0ff; |
| height: 5px; |
| } |
| .spacer { |
| height: 5px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="min-preferred-width"> |
| <div class="inline-block">Hello, world!</div> |
| <div class="ruler"></div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="preferred-width"> |
| <div class="inline-block">Hello, world!</div> |
| <div class="ruler"></div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="available-width"> |
| <div class="inline-block">Hello, world!</div> |
| <div class="ruler"></div> |
| </div> |
| |
| <div class="spacer"></div> |
| |
| <div class="outer-inline-block"> |
| <div class="inline-block">Hello, world!</div> |
| <div class="ruler"></div> |
| </div> |
| </body> |
| </html> |