css
sufficient
This technique is applicable to Cascading Style Sheet/HTML technologies where a box does not allow for wrapping text.
The objective of this technique is to ensure that when a small container with text (such as items in a navigation) have sufficient space to allow text to increase in it's spacing.
The containers are sized to a value greater than the default width of the text. The links are less than 7em wide, so the 10em width of each list item allows for expanded letter and word width.
/* CSS */ .nav li { width: 10em; } <!-- HTML --> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/contact/">Contact</a></li> <ul> </nav>
The containers are given an display of inline-block .
/* CSS */ .nav li { display: inline-block; } <!-- HTML --> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/contact/">Contact</a></li> <ul> </nav>
Note: Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.