How to Limit Text Length to X Lines Using CSS

In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS.

Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes.

There is a way, but it is webkit-only. However, when you combine this with line-height: X, and max-height: X*N, it will also work in other browsers, just without ellipses.

Let’s take the following HTML:-


<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

If we want to limit this so it only shows the first two lines of text we can do so by using the following CSS:-


.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

And there you have it, the text will now only show 2 lines of text regardless of how many lines it contains.

Where is this useful? Well, we recently used this when we had 3 columns displaying news posts and the heights of the boxes were varying heights because of the length of the title. In fact, we actually use this same method on our blog page.

We hope this helps, happy coding everyone!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Essential Tips to Build a Mobile Optimised Website

The web is increasingly moving towards mobile browsing, and this doesn’t seem to be slowing down. The number of people using mobile devices is increasing every day.

Here are a few tips that will help you build a website optimised for mobiles:

Select a responsive template for creating the website:

This is one of the most crucial aspects of building your website, as most users will visit the website through their smartphones. You can tackle this by partnering with companies offering responsive web design services as they have years of experience building mobile-first websites.

Choose the right web hosting:

Your web host needs to have an SSL certificate, and ideally, it should also provide cloud storage so that the users can view your website both on desktop and mobile devices without any hiccups along the way.

Prioritise your content requirement:

Elaborating your requirements through content is a fantastic thing, but only when provided on the website used on a big screen. But what for a mobile screen? With long-form content on mobile, you will lose users. It’s essential to prioritise your content and only provide what is necessary rather than posting everything.

Improve the website loading time:

The web hosting company should also provide you with a website speed test tool that will help you determine how fast your web pages are loading and where they’re taking time. You can improve the web page load times by using CDN or content delivery network services that distribute the web pages on multiple servers across different regions. These steps ensure that web pages load faster and provide users with a better web browsing experience.

Re-define website popups for mobile devices:

Popups are annoying on web browsers and should be avoided. However, if you want to use a popup for mobile devices, ensure that the website popup design is adjusted based on device type. Make it smaller in size, so it doesn’t cover all of the content above or below, impacting your web page rankings.

Optimise the images

Images are the reason behind slow web pages, which is a bad user experience. Ensure that images on the website are optimised and compressed as much as possible to reduce web page load time. Also, if the website is responsive, try to put in responsive images so that the web page can load quickly on any device.

Optimise CTA:

Ensure that the CTA (Call To Action) is small in size, minimally impacting the web page load time and the number of web pages that can be indexed by search engines like Google and Bing, etc. When it comes to CTAs on mobile devices, optimising the button’s size and considering how far apart each button is from the others and where they are located on the screen is essential.

Redesign your navigation menu

As web pages are getting shorter and the number of web pages that search engines can index has also reduced, it’s essential to ensure your navigation menu only shows what’s important. If there is no need for a web visitor to go anywhere else on your website other than where they already are, web designers should not include that web page in the navigation menu. It’s best to have no navigation and let your visitors get around by clicking on different headings if the website has only a few pages or only a few pages.

Test the design:

It’s essential to test the web page on different devices and browsers to ensure a great first impression for the visitors. Testing will help the senior web developer to identify and fix any issues with web page responsiveness or font rendering as soon as they appear.

Create a mobile app:

The market is developing every day, and so is the competition in the market. Web designers have the opportunity to create a mobile app or web-based software that can be launched simultaneously with your website so that you get a better chance of attracting potential customers and increasing sales conversions as well. Creating a mobile app with unique benefits that the website cannot provide attracts the users more and increases visits. Have a look at gb whatsapp, they are specialists in the creation of Whatsapp mod applications.

With web and mobile browsing becoming more and more popular, it’s essential to consider this when designing your website. To help you out with some tips for how you can optimise your site for mobiles, we’ve compiled a list of suggestions that will get you started on building an optimised website. Let us know if you need any other advice or talk about what type of strategies might work best in your industry!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Today we are going to show you how you can convert letter-spacing from tracking from design programmes like Photoshop or Illustrator to CSS.

Have you ever had that conversation with a graphic designer for a layout that specifies tracking (letter-spacing in our language) for text elements?

So how do you make this conversion?

The Simple Answer

Divide the tracking by 1000 and use em’s.

A bit of background about letter-spacing is that it is always applied to text so we should use a relative unit of length. Font size can change by the user or even by the cascade.

The best unit of length for text is the em unit.

Why is tracking different?

Programmes like Adobe’s Photoshop, Illustrator and InDesign use em’s in their tracking but manipulate the unit so it’s an easier number for designers to play with. To make it easier they multiply it by 1000.

Take a look at this screenshot from Illustrator:

Note: Tracking (in thousandth of an em)

Converting tracking back to whole em’s

To do this, all we need to do is divide the tracking number by 1000 to get the unit back to a whole em that you can use in CSS.

So 75/1000 = 0.075em.

Pretty simple right?

How to calculate this in CSS/SCSS

If like us, you use SCSS and want a reusable solution, then here is an awesome mixin for you:


/* Convert Illustrator, InDesign and Photoshop tracking into letter spacing.
-------------------------*/

@function tracking( $target ){
    @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
    letter-spacing: tracking( $target );
}

Then to use the above function you can simply type:


.txt-element {
     @include tracking(75);
}

Alternatively, you can just to the maths inline without a mixin so it’s less abstracted as follows:


.txt-element {
    letter-spacing: #{(75/1000)}em;
}

The output of the above code would be:


.txt-element{
    letter-spacing: 0.05em;
}

A few things to note…

You should not use a pixel-based value as pixels are fixed and break when:

  1. The designer changes the font-size. You would need to recalculate the value.
  2. If the user changes their text size the design of your site won’t appear as desired or even illegible to read.

In addition to this, browsers render text different to how the graphic design programs do so don’t be surprised if the designer tweaks the tracking/letter-spacing on review of the implementation ; )

We hope you enjoyed this article and that it has helped you. Happy coding all!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Responsive Pinterest Style Layout With CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Make An Arrow With A Point Using Divs And CSS

Here is an example of an arrow with pure CSS which is supported by all web browsers.

How is it done? Quite simple really, check out the below code:

HTML


<div class="arrow">

<div class="line"></div>
<div class="point"></div>

</div>

.arrow {
    width:120px;
}

.line {
    margin-top:14px;
    width:90px;
    background:blue;
    height:10px;
    float:left;
}
.point {    
    width: 0;
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    float:right;
}

CSS Arrows in different directions

You might be wondering, how do I create the arrows in different directions, don’t worry, we have you covered:

HTML


<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

<code class="language-CSS">
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
</code

We hope you enjoyed this article!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Add Line On Either Side Of Your Text Headers With CSS

Today we will show you how to create a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centred text. An easy thing to mock up an image, but a much more difficult thing to pull off in CSS because of the variable nature of the text (length, size, etc).

If the background was a solid colour, this would be fairly easy. Apply the lined background to the subhead and centre a span in the middle with a bit of padding and background colour to match the solid background. We don’t have a solid background colour here. Perhaps some trickery using the same background image but fixing the background-position would work but we didn’t go there.

Instead, we used the ::before and ::after pseudo elements to create the left and right set of these lines. The text is still in a span, which is relatively positioned. The right set is a pseudo-element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent.

The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.


.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Full Width Containers in Limited Width Parents

How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of its ‘container’.

If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the container to remain inflow.

In my opinion, the best way to get around this situation is as follows:-


.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

The idea behind this technique is that we push the container to the exact middle of the browser window with left: 50%;, then we pull it back to the left edge with a negative -50vw margin.

This way you don’t need any information about the parent width at all. Do note that both this and the calc() version require the parent to be exactly centred in the browser.

So why bother with the right and margin-right? To be honest, you don’t really need it on a left-to-right site, but if you are using a site that is built with the direction; right-to-left (rtl), you’ll need the right properties, so having both is more bulletproof.

So start getting your div’s stretched outside your containers! If this has helped you, leave a comment!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Start Learning HTML – A Beginners Guide

Being a computer programmer usually means that you can expect open job positions anytime while also sustaining your own tech-related needs sufficiently. Indeed, even knowing the basics of computer programming can get you places you never thought of before.

But there are other reasons to get started with computer programming and coding. For instance, learning HTML can help you easily build your own website from scratch. Hence, here’s how to start learning HTML even as a beginner.

What Is HTML and Why Do You Need It?

HTML stands for Hypertext Markup Language. To put it simply, it is a language used for writing websites and their web pages. HTML is somewhat like a backbone for websites making their pages functional and creating the structure of your website. In addition to HTML, you will need to use CSS (or Cascading Style Sheets). This is another language used for creating the visual look of your web pages.

Created in 1989, HTML was the invention of Tim Berners-Lee and Robert Cailliau among others. The latest version of HTML is HTML5. As you start learning HTML, you will likely realise that it isn’t as difficult as it may seem at first. It’s just a matter of building a strong foundation with basic HTML knowledge and then learning more about it as you go.

Organise Your Learning Process

Before you begin learning HTML, you should first think about organising your learning process. By having a schedule for your study sessions and considering all the learning materials you will be using, you will be able to get ready on time and organise yourself better. And, of course, by being organised, you will be able to manage your time much better, learning at a faster pace and getting other work done throughout the day swiftly.

In other words, organising your learning process will help you save a lot of time and effort while also streamlining your learning journey. After (or even before) you have chosen your courses and study materials, think about how often you can actually study. Aim for at least three to four hours a week and adjust your schedule accordingly. If you enrol on a course with a fixed schedule, you will also have to take this into account when making your schedule.

But how long will it take you to learn HTML properly? The good news is that you can grasp the basic elements of HTML in no more than a few hours. However, these are just the bare basics and no more than that. To truly understand HTML or even master its advanced elements, you will need to invest more time in learning theory and practising what you have learned. Practice is the keyword here – without it, you won’t be able to learn HTML properly.

Consider Other Things You Should Learn

As mentioned earlier, HTML is not the only thing you will need to use to create your website. There’s also CSS to think about because the two come together. As Veronica Hills professional essay writers review site puts it, “HTML lets you create the skeleton for your website while CSS builds on it creating the bones, the muscles, and everything else.”

Much like with HTML, CSS will require you a few hours to grasp the basics and then tons of practice to properly learn it. Luckily, many resources available to you for learning actually combine materials for HTML and CSS which means you can learn the two simultaneously. Alternatively, you can first seek out HTML resources and then move on to CSS once you are confident with using HTML.

Choose Your Learning Platform and Resources

So, how exactly can you start learning HTML? Well, you can buy a book, enrol in a university course… or you can start learning it yourself by finding relevant online courses or using online learning materials. Here are some options to consider:

  • W3Schools is a website that covers the basics of such languages as HTML, CSS, Python, JavaScript, and others. There are examples and interactive tests available absolutely for free.
  • freeCodeCamp is a free online course on HTML and CSS focusing on practice.
  • Udacity is an e-learning platform where you can find free HTML and CSS courses taught by an instructor who will explain all the basics to you.
  • Codecademy is one of the most popular platforms for learning HTML piece by piece and focusing on theory.
  • HTML.com is a website for beginners who want to learn HTML. It has step-by-step tutorials guiding you through the foundations of the language.

HTML Editors You Can Use

Last but not least, as you study HTML, you will need to use an HTML editor. As experts from the best websites with custom writing reviews say, “Never use word processors for writing HTML code. Instead, use an HTML editor. Test what you’ve written in different browsers to see how your work varies depending on the browser you use.” Here are some HTML editor options to check out:

  • Notepad++ is a very popular choice in the realm of HTML editors but it can also be used for other languages. It is a small program that offers the basic functions for you to write your code as clean as possible. It has a simple design preventing you from getting distracted and also has some plugin options for more functionality. In addition to that, it has a very handy autocomplete feature. However, Notepad++ isn’t supported by Mac computers and can be a bit difficult to get used to as a beginner.
  • Sublime Text 3 is another popular HTML editor which is both free and available for multiple platforms, including Windows, Mac, and Linux. The best thing about this HTML editor is that it is quite user-friendly and has a number of customisation options while also having a visually appealing interface to look at. On the other hand, there is no toolbar or dashboard and you can’t print code or documents.
  • Komodo Edit is another interesting option to check out. It is a free, open-source editor that supports multiple languages and offers different extensions. Komodo Edit is known for having a user-friendly interface and being supported on multiple platforms (Windows, Mac, Linux). That being said, there is no default autocompletion and some of the settings are hard to find and change.

Final Thoughts

All in all, learning HTML definitely has a variety of benefits, no matter what job you are performing or how you will be applying your HTML knowledge. Whether you want to be a computer programmer, or you are a small business owner looking to build your own website, learning HTML is the way to go.

That being said, as you set out on your learning journey, you will need to follow a number of best practices to be successful in your endeavour. Use the tips in this article to help you start learning HTML.

Frank Hamilton - Profile

Posted by: Frank Hamilton

Frank Hamilton is a blogger and translator from Manchester. He is a professional writing expert in such topics as blogging, digital marketing and self-education. He also loves traveling and speaks Spanish, French, German and English. Meet him on Facebook and Twitter.

 

It’s good to share