Miscellaneous Important Tips and Tricks

Question 1

Create a clearfix style

Answer 1

.clearfix::after { display: block; content: ‘’; clear: both; }.

Question 2

Enable text to display ellipses when it overflows

Answer 2

text-overflow: ellipsis;

Question 3

Prevent text from wrapping:

Answer 3

white-space: nowrap (or normal for wrapping)

Question 4

Handle whitespace so that spaces are respected or not

Answer 4

Use pre element; alternately, use white-space: pre;

Question 5

Hide text such that it is still accessible to screen readers

Answer 5

.accessible-hidden { width: 1px, height: 1px; position: absolute !important; clip: rect(1px, 1px, 1px, 1px); }

Question 6

Create sections of 700px width without wrapper divs (such that background can extend 100% and text only 700px)

Answer 6

padding: 1rem calc(50% - 350px); that’s simplified from (100% - 700px)/2 because 100/2 and 700/2.

Question 7

create a rectangle with 16/9 aspect ratio using css alone, no width value.

Answer 7

height: 0

padding-top: 56.25%