Category: Css

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

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

 

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:

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

#teaser1
{ 
	height: 100%; 
	background-image: url('/globalassets/top-image.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}