CSS overflow-wrap — Control wrapping of text overflow or wrapping
This css works in most common browsers (including IE)
|
1 2 3 4 |
word-wrap: break-word; //ie specific overflow-wrap: break-word //other browsers |
Internet Explorer has its own implementation for “overflow-wrap” -> “word-wrap”.
A readymade sass mixin:
|
1 2 3 4 5 6 7 |
/* Usage: .box { @include wordBreak; } */ @mixin wordBreak { word-wrap: break-word; //ie specific overflow-wrap: break-word //other browsers } |
A Complete Guide to Flexbox | CSS-Tricks
A Complete Guide to the Table Element | CSS-Tricks
Bootstrap 4 truncate-text responsive classes SASS helper
I needed to truncate text in certain device sizes in a Bootstrap 4 enabled site.
Bootstrap comes with the text-truncate css class that will truncate text in elements that are in displayed as block or inline-block.
There is no support for targeting the different viewports out the box.
Here is solution for this;
Usage
We want the text of this element to truncate (Shorten the text if it doesnt fit and adds … to the end of the text) on smaller devices:
|
1 2 3 |
<p class="text-truncate-xs text-truncate-sm">Maecenas egestas arcu quis ligula mattis placerat. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Phasellus tempus. Vestibulum fringilla pede sit amet augue.</p> |
Source
Include this scss file to your site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @include media-breakpoint-only(xs) { .text-truncate-xs { @include text-truncate; } } @include media-breakpoint-only(sm) { .text-truncate-sm { @include text-truncate; } } @include media-breakpoint-only(md) { .text-truncate-md { @include text-truncate; } } @include media-breakpoint-only(lg) { .text-truncate-lg { @include text-truncate; } } @include media-breakpoint-only(xl) { .text-truncate-xl { @include text-truncate; } } |
How to preserve line breaks in p elements with CSS
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
Source: CSS white-space property
Example:
p.intro {
white-space: pre-line;
}
Works in all modern browsers and IE8+
15 Fabulous Alternatives to Bootstrap, Foundation and Skeleton
Web Compiler – Visual Studio Marketplace
The easiest and most powerful way to compile LESS, Scss, Stylus, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.
Solution for responsive images covering entire container and keeping aspect ratio
This solution is probably already out there somewhere on the interwebs, but I write it down for now.
I’ve been working with a Bootstrap 4 based website a lot lately.
Today I got the requirement to make an background image adjust to the height of its sibling column but at the same cover the entire background of its container.
I want the entire container box to be covered by the background image and still keeping its aspect ratio in various screen sizes, it’s ok with clipping and stretching (if image is to small). Here is a solution:
html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="row"> <div class="col-6"> <div class="teaser-container" id="teaser1"> ...column 1 html content... </div> </div> <div class="col-6"> <div class="teaser-container" id="teaser2"> ...column 2 other various height html content... </div> </div> </div> |
css:
|
1 2 3 4 5 6 7 8 9 10 |
#teaser1 { height: 100%; background-image: url('/globalassets/top-image.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; } |