Understanding Line Height, White Space and Wordbreak in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we had covered CSS line height, margin and padding topics.

In these 3, we saw that when we use the CSS box model.

In that case line height, margin and padding are very useful.

I hope you have gone through our last segment properly.

You have performed the practical, practiced and checked this.

If you have any difficulty or understanding problems. In our last segment, if there is any question that has arisen, you can tell us on forums.learnvern.com.

We will try to rectify your questions and revert to you at the earliest.

Our today’s segment is on CSS vertical align, white space and word wrap property.

All three properties of today are advanced level properties in our CSS.

Because when we play with the table or when we work with inline or inline blocks like display properties.

In that case, we have to add extra properties like vertical-align white space and word wrap to get the proper result.

Means if we are not getting proper required results, we can make use of these properties and get the required results.

We will see about all these properties one by one.

Our first point is vertical align.

Like it is written here.

The CSS vertical align property is used to define the vertical alignment of an inline or table cell box.

Means  what is said in the line exactly in the same terms, this property vertical align works with in line and table cell.

If we have taken any p tag for the heading tag.

Making use of it along with it is not that useful.

But when we work with inline display properties or we work with the tables.

 Table cells means td, means table data that they represent in the cell.

With both of these we make use of CSS vertical align properties.

With the help of this, the content that we have in the table cell or in the inline property, that we can display as per or requirement.

Means if there is a line, we can show it above the line, we can show it below the line, showing it exactly in the middle of the line.

All these are the uses of these.

For example, when we write in the notebook, we know that when we use Hindi or any other language. We mostly touched the top line while writing.

When we write in English, we touch the below line and write.

Exactly, like that we have to show the content above the line and below the line, this we can do with the help of vertical align property.

Further it is written here, It is applied to inline or inline-block elements.

Like we have seen apart from the table cells.

The two display properties that are these are inline and inline-block with which the vertical align works.

It affects the alignment of the element but not its content.

It means that the content that is there inside is not affected by it, alignment of the content or the element, we can make use of that with this.

Alignment means moving the data or content to the left, right, top, bottom, etc.

When it is applied to table cells, it affects the cell content, not the cell itself.

The first two points are related to display in line.

The last point is related to the table.

When we use it with the table the table’s cell content gets affected by it.

Cells don't get affected by it.

It means that when we work with inline property display inline or inline block, it doesn't affect our content.

When we work with table or table cells using vertical align, at that time the content gets affected.

That’s why ,Our today's topic is not a beginner level topic, it's an advanced level topic.

Because , inside it, it is based on it’s result. Its result depends upon where we use it.

Going ahead we will see that the vertical align which is there, has a lot of values.

Here vertical align then baseline, length, % and at the end text bottom.

All the properties are listed out here.

We will check all the properties in the practical.

When we use vertical align property, it so happens here, like we have seen with the inline property and table property the results are different.

The result that comes inline, the same result comes in table property, that is not necessary.

 So, based on the table or inline property.

Based on the element, its result varies.

We will see all the properties one by one.

Many properties give similar results.

Like top and sub, we will get their results almost the same but they have different properties.

So, we will do it practically and we will try and see how it works.

First of all, we will open sublime text, inside sublime text html.

Example, vertical align, property, we will save it.

We will name its vertical align.html.

Okay,guys!

 Now, we will run this program.

So, this is our program.

Now, we will first of all check this with inline property.

To check with inline property, we will do one thing in our body tag, we will take one paragraph.

Inside the paragraph, we will add two things, one will be an image and one will be some text.

 With these two things, we will verify how it gives the result.

So that, we can get an idea that whenever we are changing the vertical alignment in which way it shows up.

clear, guys!

So first of all, I will place one image in this.

Images, space, we will give a slash and the image that is there with us, it’s name is image.jpg, we will give the width 150, height we will give as 150.

Save, reload.

 So this image is showing up here.

Now next to this image, we will add some content. for example, this is the content to check different alignments.

Save and reload.

Okay,guys!

We can see here that when I am placing the image and after that without any vertical alignment property when I add some text.

Next to the image.

From the rightmost bottom corner, our text starts.

So, with us to start the text, from here, where I am pointing right now, from here we have got the space available, We can do in the middle and below as well.

But by default, it shows from below.

So, this is our default property to give alignment to any text.

To this p tag or to this element, if I want to give any vertical alignment property.

For that what I will do is, I can give the vertical alignment property to p or I can give the image the vertical align property.

In my current example, I will give my image a vertical align property.

Currently in my image this is a default result, so we will keep it as it is .

This is the content to check different alignments.

 We will do one thing.

Content with no vertical alignment.

Save.

So, here we have not given any vertical alignment property.

clear!

Now, we will do the same thing and generate a different p tag and it will give class to our image.

Now, we have a lot of properties available with us, like it is shown in the slide.

From baseline, length, percentage till text bottom.

Now, we will check every property one by one.

Let's say we will reduce the width of the image, so that more content can be added.

For example, 50.

Ok.

So, this is our content that has come.

Now, in this the 1st class is the baseline. so let's say, vertical align va, if we give the baseline.

So, we can define it in the way of internal CSS or if we do not want to do it in that way, we can write here by default.

So, if we are going to add a lot of content.

So, let's use the same style, vertical align, baseline.

Save.

Ok.

So, our 1st property is vertical align, baseline.

Baseline means, starting form below or this content that is there, in this there is no difference that is getting generated, with baseline.

okay!

In our content the default that is there, that is the result that we are getting.

So, the base line shows the default property.

Now, in vertical align comes our length property.

Length means, we can give the value in 1, 2, 3.

So, let's say I will add here width, length, I will add here one.

So, here in length property also we are not getting any result.

If we make it px, we are getting a slight result.

The image has slightly gone up.

If I make it 10 pixels.

So, you can see that the image is going up by 10 pixels distance.

Vertical align means our image is going up.

Because we are giving the vertical align to the image and not to the text.

When I am giving 10px, it is going up.

If I make it minus, my image is minus 10px.

It is going down.

If we want to properly check it, we will do one thing, in the style tag, p, we will take a light colour.

Here you can see that our other content almost starts from down.

But when we have taken the baseline and minus 10 pixels here, our content is going downwards.

okay !

If I make it minus 20.

You can see that my image is going that much down because my image is inside the p, so it is not coming out of p but it is going down so much that it is taking down our p tag as well.

So, our content is moving in an upward direction.

So, lets say if I make it minus 100, you can see that both text and image are inside p, so my image is going down by minus 100 pixels down.

Along with that the text is going that much up.

Up means that text is in its place, it is not moving.

What is moving is our image.

So, our image is going in the below direction, which means it is going minus 100.

If I plus it, the image is going 100 pixels in the upward direction.

So, this is our vertical align.

Okay guys, got it?

If I want to set this.

If I want to bring the content and the image next to each other.

So, we can play with it or make changes with it.

So, we can generate the result the way we require.

Our next property in percentage is…so here we will write length in pixels, next is our length in percentage.

Lets say, I will convert this into percentage.

Ok.

So, this is next.

In which, the image is moving in the upwards direction.

If it is mentioned 10%, it is going 10/% upwards.

If I make it 100%, my image is going 100% up.

Now, this percentage that is there, my this content that is there.

P’s height, from here the percentage is getting calculated.

If I see 100, you can see that, here my text that is there, it is affecting that.

100% means how much is my text…when we calculate 0 to 100%.

With respect to what the percentage is? With that respect is our percentage.

So, our percentage is with respect to this text.

If I make it 50%, half my text will be seen and half will go up.

So, we can see that it is almost touching.

So, my image is going up by 50%.

Our next property is sub, s - u - b so vertical align, sub, ok.

In sub, we are not getting much difference here because sub’s reason is that it gives us the data in sub script.

So, let's say, if I do something related to two.

If I want to give any data in two’s subscript.

When we work with maths or when we have to show up the mathematical operations.

At that time these things come into work.

If we want to show the 1st character big, after that we want to show in subscript or superscript.

At that time sub or sup, super comes to work.

So, we will see both together.

Okay, guys!

When we work with the image, our sub doesn't work.

You can see that it is giving the same result, the way it is up there.

So, what we will do is, we will take a p tag and in that we will write.

This is the example of sub vertical align.

In this we will take two, then we will take span, after the span we will add one more two.

Now, in this span I will add style, vertical align, sub, save.

Now we will reload it.

So, you can see that two and the next two that are there that start from below.

In mathematical operations, we have seen numbers like 2a, 3b.

Like 2, in subscript it is written or in power.

To show the maths operation or maths content we normally use the subscript.

Here 2 and the a in it’s subscript.

It is showing up a little below.

Same if we see for super.

Like if we have to write something in power, to the power 8 or 16.

For that sun vertical align.

Here it will come, sup,s-u-p, super, and then in the place of a we will keep 10.

So, here you can see that 2 to the power 10.

So, sup, so what are we getting from super? Whenever we want to show power in maths, it means 2 to the power.

When we have to show the power.

Any such content, not only maths.

We have to show something in the upward direction, over the head of the content.

At that time, we can make use of sup or superscript.

So, this was our superscript.

Okay, guys!

Then comes our top vertical-align.

On top, what happens, our text will start from up, for that I will copy the top image.

 Here we will take the top, here with top, will save it reload.

 you can see that the content next to the image is starting from up.

Our image is also starting from up, not from below.

Usually, when our default property is in this way, that of a default text is generated from below.

In that case, when we have to set the text from top at that time, we make use of the vertical align property.

 Because mostly when we work with the webpage, this is our required result which we are not able to get by default.

At that time, we make use of vertical align top or text top like properties.

So, this was our top.

Clear, guys!(pause)

Same, now we will make use of the bottom.

Save.so this is bottom where the text is starting from below.

We are getting the results almost like the baseline.

Like I had said initially, there are a lot of vertical-align property results which can be similar, like you have seen before.

 So this is our example where baseline and bottom are giving us the same result.

 Now, if you see the next one which is the text top, it means setting the text in the upper direction.

Here, you can see thar top and text top, they are generating the same results.

The starting text and the image from the top.

Next is middle vertical align, which we use in a lot of places as it helps in generating required results.

This is the vertical aligned middle.

 Because in every case it is not necessary that our contents start from top or from the bottom.

By giving vertical align middle, whatever is the image’s height, from the middle our content starts.

So, both image and content are both set in the middle line.

This is what we can do most of the time to generate the required result in the webpage.

Because even when we increase the content it automatically gets adjusted.

Okay guys, got it?

Now, after middle comes text bottom.

Like text top, exactly in the same way is text bottom.

Save; text bottom; we are getting exactly the same result like we got in the bottom base line.

These are all the sites of vertical align.

All the vertical align properties, we have to check in this.

Clear, guys!

Our next slide in vertical align is white space.

What is white space? White space means like it is written here, the CSS white space property Is used to specify how to display the content within an element.

When we show any content in our h tag or we give the padding in any element or we add the content in any division.

Then in that content the extra space that is there how we can adjust that.

For example, if I have generated a table and there are multiple rows inside the table and there is also multiple data.

Few can have small names and few can have big names.

Whose name ends in a few words, we will get more space there and whose name ends in more words, there we require more space.

The cell with the bigger, If more space is getting occupied then our cell’s width will increase.

The top and bottom cells also occupy the same width.

How we have to use that extra space for how we have to use or justify it that we can check with the help of white space.

For that we will do one thing, we will generate a new program.

HTML, Example whitespace property.

We will save it first of all.

Whitespace.HTML.

It has been saved and now we will run it.

 So, this is our program.

Now in this, to check the white space property we will generate one table.

Table, tr, in the 1st row, we will take th, Name,  Employee id, first name, last name.

The way it is written here, in the same way, we will generate 3 to 4 columns.

For example, in td we will give employee ID as 1.

In td, we will give the first name as ABC.

And the last name we will give as DEF.

Okay.

Now, we will generate one more similar row.

In this, we will keep a bigger name, let's say A B C D….Ok, so we have increased the name here.

Same here in the third row, we have kept the name smaller.

We can make it slightly bigger as this is.

This is our data here, save and load.

So, our table is getting generated here.

Now, we will modify it a little.

For example, we will give the style; style, table, border, 1px, solid black.

We will even collapse it; border collapse, collapse.

Save, ok, same property we will give to table td, when we write tr, td means applying the same property to td.

So, you can see here that my th code is left.

So, table, tr, th.

So, here we have given the property to th, 1, 2, 3.

Here, our data has come in the cell and the content has come inside.

Intentionally in 2 cells, we have entered more data.

Because of its help in our data there is more space here.

Here, we will get more space and data.

Now, we have to handle the extra space that we are getting.

This is our dummy table, this small one that we are seeing.

If I reduce the width of this table.

Example, table, width 20% .You can see that in my screen’s 20% part, this table is getting adjusted.

OKAY,GUYS!

If I zoom it out, you can see that my table is coming in 20% of the portion.

Ok. This is my zoomed in table.

Now, we can see that the employee ID which was there has come down.

In the first name, the space has increased a little, because of this ID.

Now, we will go back to our slide.

In the slide, we have been given the values, white space normal, nowrap, pre, pre-line and pre-wrap.

Now, we will check all these properties one by one.

So, Now let's stay inside my table, my table td which is there, with that white space.

Now with this, I will write every property once.

The first one was normal, I will save the normal one.

In normal, we are not able to see any effect because that is our default property.

 If I remove normal and I make whitespace property nowrap and save it.

So, you can see that the wrapping that should happen here is not happening.

Wrapping means our data which is going outside the width is not getting wrapped. 

means, it will not come down.

For example if I apply the same property to th.

So, you can see that my id which was down has gone up again.

It means inside the cell, as per the width, the wrapping that should be there.

Means, how much width is occupied by the cell if more than that the data has been occupied in the cell, the content should get wrapped and should come down.

To avoid that we have used nowrap.

Means no matter how much the content is, my content should continue in a single line.

To give this property, we have made use of nowrap.

So, with the help of nowrap, our content will not come down, it will continue in the same line.

Clear Guys! okay!

Now, our next property is pre.

Pre means doing the wrapping from early on.

As you can see, we are not able to see any effect here because if we add line break only then this will work.

Means in the employee ID, If I add an external line break.

You can see that now my text is getting wrapped.

It means pre avoids if there has to be a wrapping there.

If we have to bring this avoided pre, If we have to add it, we have to make use of br tag.

This is an example for the headings which are too big.

Currently, we have taken a 3 column table.

For example, when we work inline environment, we have 16, 17 columns available.

It is not possible that one table fits in one screen.

In that case we have to make use of br tag once in a while.

It is really not a good practice but we have to do it sometime to show the proper results as per the client's requirement.

Only in that case we make use of br tag.

Okay, guys!

Then comes, we will remove one br.

Next comes pre line.

We will comment this.

We have got a slight difference in the pre line.

Our spacing has reduced.

Pre line means that how much ever single white space is there, it removes that.

If I remove it and show it to you again, here you can see that after V and after ID there is a little bit of space there.

There is some space after it.

If I remove it and add pre line.

So, our spacing gets removed, it means br is getting added as per the width.

Without our writing it is getting added.

And the extra space here is also getting removed.

Okay guys, got it?

This was our pre line then comes pre wrap.

You have seen that our space has gone.

Sometimes, if we have not given any wrap, what pre-wrap does is our text which is there, it gives us the text with the line break.

So, here, there are 2 properties, one is pre wrap, pre, pre wrap one, normal, no wrap, pre and pre wrap.

The property that is used the most is the no wrap property, 2nd one is pre.

With the help of these both, we can get our required result.

We can either add the wrapping with the pre or with the help of no wrap we can remove the wrapping.

So, the most used property is the no wrap and the pre one.

This is our white space practical.

Clear guys!

How we can work with the white space for our required white space, if we want the space or not, etc.

Now, we will go to our next slide.

After white space, comes the wordwrap.

For word wrap also we are going to use the same table but by making a new program.

Ok.

Example, word wrap, now we will keep the table as it is.

We will keep the width also as it is.

And here we will add whichever is our word wrap property.

We will save this program.

Ok.

So, this is our program of word wrap.

We will see it a little big.

So, this is our default table in which no word wrap is added.

Now, when we add the word wrap property in it one by one.

 So, for word wrap, we have the properties available.

Word wrap means when we have added a long word or a long line, do we have to add it in the next line or not?

If we have to do, then in which way we have to do, that we can do with the help of word wrap.

Here there are 4 options for this, these are the 3 options.

There is one more option which we will see with it.

1st is the normal, break word and break all.

So, let's say, 1st of all in the word wrap I add normal.

You can see that there is no result in this.

Means, our default wrapping is normal.

After a normal comes break word, that means our word should break as per the width.

If I save and reload it.

So, it is not giving us the result, so what we will do is we will make the width 10%.

Now, this program that is running instead of word wrap, we will use break word.

Word break property; in word break the 1st property that comes is our normal,

so  first of all, we will add normal here.

The program that is there is in normal.

 We are not seeing any effect here.

Normal gives us the default view of the table.

Next in word break comes the value break word; break word

This is almost the same word break is the property and break word is the value and reload.

When I reload it our table is as big as 10%.

This is 10% value.

And the rest of the data is breaking and falling down as per the 10%.

The words which are long in the line at breaking and coming down.

Suppose the width was 20% then it is 20%.

The table's display is content based though we have applied width.

But when we apply the brake property, we zoom it out.

So you can see that this is our table with 20% width.

If I zoom out, you can see that there is no difference that it is making it to the width.

Because we have used the word break property and we have also defined the width.

So the width is always 20% of the screen.

When long words come into it they break.

We will see one more property next which is normal.

We will comment these both.

We will add a new property.

There is one property in the slide, it is called break all.

We will add break all.

Ok. guys!

What is the difference between break all and break word? Break word start from where the word starts.

Break all based on the width breaks from the middle itself.

For that if you see here.

You can see that when I use the break word property.

When my word ends the next word breaks and falls down.

First is as it is and name is falling down.

As we have used break word property.

Okay guys, got it?

If I remove the word break and add break all property? So the first name is taking as much space as it can and e is coming down.

So the question will be, why   M P l Y O E E is not happening  in that case, why after employee,  ID is not coming? This is because we have given a fixed width of 20%.

If we remove that, we can see that the issue is solved.

But when we give width, in fixed width when we give, break all, let's say I make it 50%.

Ok.

Now you can see that my words are breaking.

When I will make it 20% again.

Then Employee is such a word which cannot entirely come there.

So, in the case of employee id, our default break all property is benign used.

If we use break word here.

We have used break word, but in the case of an employee it is break all.

If we take any of the both, here that property only will be used.

Here we cannot break the employee.

So, these are our word wrap examples.

These are the only properties with us.

In total there are 3 properties that come; total, normal, break word and break all properties.

Like it is shown here.

Okay guys, clear!

Today we learned about line height, white space and word wrap.

These topics are of advanced level.

So, I request everyone that whichever points or practical we have performed today, you try it on your own, you check the different results that you are getting and id during this segment or during performing the practical, any question arises.

You can tell us on forums.learnvern.com.

We will try to revert to your questions at the earliest.

Our next topic is text transform.

Thank you.