| <!DOCTYPE html> |
| <style> |
| .clone { |
| -webkit-box-decoration-break: clone; |
| box-decoration-break: clone; |
| } |
| .border { |
| border-left: solid 10px orange; |
| border-right: solid 20px purple |
| } |
| .padding { |
| padding-left: 10px; |
| padding-right: 20px; |
| } |
| div { |
| border: 5px solid blue; |
| } |
| .min { |
| width: min-content; |
| } |
| .max { |
| width: max-content; |
| } |
| </style> |
| <body> |
| <div class="min"> |
| <span class="clone border"> |
| line1 line2 line3 |
| </span> |
| </div> |
| <div class="min"> |
| <span class="clone padding"> |
| line1 line2 line3 |
| </span> |
| </div> |
| <div class="max"> |
| <span class="clone border"> |
| line1 line2 line3 |
| </span> |
| </div> |
| <div class="max"> |
| <span class="clone border"> |
| line1 line2<br>line3 |
| </span> |
| </div> |
| </body> |
