max-width Archives - Lena Design

The CSS max-width property specifies the maximum width of an element.

The CSS max-width property prevents the value of the width property from becoming larger than the max-width.

Syntax:

max-width: none|length;

none (default) – no maximum width specified.

length – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  max-width: 50%;
}
</style>
</head>
<body>

<h4>max-width: none;</h4>
<span class="example1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

<h4>max-width: 50%;</h4>
<span class="example2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

</body>
</html>

Output:

max-width: none;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

max-width: 50%;

This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph.

Enjoy coding!