Css – Andreas Plahn Developer Blog

May 10, 2019May 10, 2019

CSS overflow-wrap — Control wrapping of text overflow or wrapping

This css works in most common browsers (including IE)

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:

/* Usage: .box { @include wordBreak; } */

@mixin wordBreak {

word-wrap: break-word; //ie specific

overflow-wrap: break-word //other browsers

}

Source: CSS overflow-wrap — Control wrapping of text overflow or wrapping – CSS: Cascading Style Sheets | MDN

April 15, 2019

A Complete Guide to Flexbox | CSS-Tricks

Source: A Complete Guide to Flexbox | CSS-Tricks

W3 Schools: https://www.w3schools.com/css/css3_flexbox.asp

February 13, 2019

A Complete Guide to the Table Element | CSS-Tricks

Source: A Complete Guide to the Table Element | CSS-Tricks

November 22, 2018

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:

<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:

@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;

}

October 25, 2018

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+

September 30, 2018

15 Fabulous Alternatives to Bootstrap, Foundation and Skeleton

Source: 15 Fabulous Alternatives to Bootstrap, Foundation and Skeleton

May 17, 2018

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.

Source: Web Compiler – Visual Studio Marketplace

March 4, 2018

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: