To prevent the DIV from starting a new line with CSS, we set the overflow and white-space properties.
For instance, we write
<div style="overflow: hidden; white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris
nunc, vehicula at nisl eu, aliquam ultrices augue. Nullam eget auctor metus.
</div>
to add a div that hides overflowing text with overflow: hidden
And we hide any text that wraps to the next line with white-space: nowrap.
To disable text wrap with CSS, we set the white-space property.
For instance, we write
div {
white-space: nowrap;
}
to set white-space to nowrap to disable text wrap in the div.
To add HTML ordered list lower-alpha with right parentheses, we set the content property.
For instance, we write
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
to add the ordered list.
Then we write
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}
to set content to counter(list, lower-alpha) ") " to set the counter to letters.
To disable a link in Bootstrap with CSS, we set the pointer-events property.
For instance, we write
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br />
to add a link.
Then we write
a.disabled {
color: gray;
pointer-events: none;
}
to set pointer-events to none to disable clicks on the link with class disabled.
We set its color to gray to make the text look grayed out.
To fix word-wrap break-word does not work with CSS, we make our element an inline block element.
For instance, we write
div {
display: inline-block;
word-break: break-word;
}
to make the div an inline block element and apply the break-word style with word-break: break-word;.
To fix object-fit not affecting images with CSS, we set object-fit to cover.
For instance, we write
.myImg {
object-fit: cover;
max-width: 100%;
object-position: center;
}
to set the object-fit to cover to make the image fit in the img element boundaries.
To split div into 2 columns using CSS, we use flexbox.
For instance, we write
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
to add nested divs.
Then we write
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
to make the outer div a flex container with display: flex; and make its contents display side by side.
And then we make the div with IDs left and right take 50% of the space with flex: 50%;
To increase the clickable area of an a tag button with CSS, we set its width and height.
For instance, we write
.button a {
display: block;
width: 100%;
height: 100%;
}
to set the width and height of the link and make it a block element with display: block;.
To center ul and li in a div with CSS, we use flexbox.
For instance, we write
ul {
justify-content: center;
display: flex;
}
to make the ul a flex container with display: flex;.
And we center the contents horizontally with justify-content: center;.
To fix input type "number" won’t resize with CSS, we set the width property.
For instance, we write
input[type="number"] {
width: 80px;
}
to set the width of the number input to 80px.
