Understanding Hyphen Property in CSS

Hello friends.

Welcome to our CSS series.

In our last segment, we learned about CSS column property.

How we can divide one paragraph in multiple columns.

I hope you have performed the practical of the last segment and practised it.

Our today's segment is about the CSS hyphen property.

Basically, what are hyphens, like it is written here.

CSS property is used to control the hyphenation of the text in the block level element.

It means that when we type any big paragraph or type multiple lines, when the paragraph reaches the end of our screen width, after that it starts from the next line, the remaining content.

In this way our paragraph moves ahead.

Sometimes it so happens that if there is a text in a way the width is our element’s width.

For example, division or any such element we have taken in which we are adding our text or we have taken any p tag in which we're adding our paragraph.

In that when our content or text reaches the end of the width.

It is the possibility that if our word is quite long in length, in that case our word breaks and comes down.

In that case if our word is breaking from the middle.

Instead of breaking as it is we will add one hyphen.

Which indicates that our word that is there is in continuation and the rest of the word is continuing from the next line.

When we do the essay writing, we also use this method.

If we reach at the line’s end and if there is a lot of space remaining.

So, we write half the word there and later we write the hyphen and continue with the rest of the word.

This method of hyphenations can also be used in CSS using hyphens.

Here the next line is, it defines how the word is hyphenated.

If it is too long or when the text wraps across multiple lines means if we are writing text in multiple lines, how can we add the long words with the help of hyphen? Like it is written here.

The syntax of a hyphen that is there.

We will use the word hyphen property.

And in total there are three values with us.

None, manual and auto.

In CSS we see in many places that we use multiple values.

Many of the values we get a similar result like we had seen in the print property, the left and right values which he had of page break property.

In that we were getting almost the same result.

In the CSS, there is a possibility in a lot of places, that for two different values, we get the same result.

But guys do remember, when we are using different values and we are getting the same result that means that result is browser dependent and there is some reason behind it.

For example, when we will perform the hyphen’s practical.

In that as well in manual and auto we are going to get the same result.

But there is some difference in the values which we will understand from this table.

First value is None.

None means that we don't have to add the hyphens.

This value does not hyphenate the words, it never hyphenates the word at line breaks or even if the word is too long means even if our word is too long still the hyphen will not be added.

Manual, it is a default value of the hyphen, the word only when the characters in the words suggest hyphenation property, it means that if hyphenation property has been suggested by the browser, in that case, only the hyphen will be added.

The two Unicode characters are defined below, which can be used manually to specify the possible line break point in the text.

Means based on the unicodes here decision making happens.

Do we have to add the hyphens or not? Our last property is auto.

In this value the algorithm decides where the words are hyphenated.

Means in this mandatory hyphen will be added if at the width’s end a long word is being added.

For this when we will perform the practical it will be properly clear to us.

First of all we will open Sublime Text, html, example hyphen, hyphen.html is the name that we have given to the program.

This is our program that is running here.

So, to add hyphen in Sublime Text, first of all we will add a paragraph.

So to add the paragraph what we will do is we will add the division.

And here we will add h3 Tag.

We have in total three properties available with us, none, manual and auto.

So, for all three, we will perform the practical one by one.

So, at 1^st will come an example hyphen with hyphens none value, and here in the division we will add, there are few long words.

So, in this div there is a long word.

Okay.

Save.

So, we are getting something in this way.

So, what we will do is we will add a style.

So first of all div, text align centre, in div will take background colour and we will also set it’s width, for example, 100 pixel.

So, we are getting something like this here.

So, here our div has come in 100 pixels.

Here is our text.

So, our text starts from the left-hand side.

Now, we will give some border to this div.

So, this is our division.

So, you can see that the long word that we have written, loooong…here which is going out of the division.

So, here we will add the hyphen property.

So, let's say div, class, hyphen none, hyphens none, so on reload, we have given hyphen none property.

So, here hyphens will not be added, if we repeat the same thing and this time, we will take manual because our second property is manual.

So, let's say manual, hyphen, manual, hyphens, manuals, save and reload.

So, here we have generated an example with a hyphens manual but you can see here that our property is still going out.

So, that means that there is some difference in our writing method.

Now, we will identify what is the difference here.

So, as you have seen, it is not breaking here.

So, we have to identify the problem, here in hyphens when we use the manual values, like we have used it here, hyphens manual.

In the hyphen manual we have to add two types of Unicode characters. In the slide it is written here, the two Unicode characters are defined  which can be used manually to specify the possible line break points in the text.

So, what are these two Unicode characters, these two Unicode characters which are there are our & shy;.

So, with it’s help we add where our breakpoint should be added.

Here, they are in two ways either they're hard coded or soft coded, hard coded means our line that is there, for example our current line is this one.

In this div there is a long word.

Means I am placing there twice.

When I am writing there twice, I can identify that in between there, Unicode characters should be there.

That character is in this way, & shy;.

So, this character places our hyphen.

If you feel that in our line there is such a possibility, where the word break should break.

In that case &shy, this keyword is there.

You can place that.

Here if I feel that my words are coming twice.

So, I can place it here.

Same way in my long word also, I can place it somewhere here.

So, hardcodedly means manually in 4 places we have, places this word.

The other possibility is that we place it in 4 places but the browser will identify whether it has to be placed or not, meaning it has to show the hyphen or not.

I will save this code and when I will run it you can see that wherever &shy, I have mentioned.

My hyphen is not getting added in every place.

For example, I have written there, there,.. there my hyphen is not getting added.

Here it is not happening because we are getting enough width of the division.

Where are we not getting enough width is in the long word, so in the long word where all I have added hyphen hardcodedly.

In that every line, you can see that the hyphen is getting added.

So, here in the hyphen manual you can see that the browser identifies whether it has to place the hyphen or not.

But while programming, when you're designing a webpage, when you're writing in HTML, you have to add the hyphen from your end, browsers will not add it explicitly.

If I keep shy as it is here, I reduce its width, for example 50 pixels and reload it.

So, you can see that where I have written there, there together even there hyphen is getting added.

This indicates that my word is breaking.

So, we have to add a hyphen there.

So, we saw that the key word has also been used shy.

Along with that, the width is also less, so the hyphen has to be added.

If I increase its width, it is 100 pixels.

So, you can see that my there, there between hyphens is not coming.

So, while writing the program you have to add shy keyword whether to show it up or not.

Now we will copy the same line, auto, we will keep it as it is, auto.

So, you can see that this is our hyphen auto example, whenever we have taken hyphen, it is getting added everywhere.

We are getting almost similar examples over here.

But if we reduce it’s width a little, 70 pixels.

You can see that there is not cutting.

So, we will take 50 pixels again.

So, as it is here between there, hyphens are getting added.

As much as content is going out of the width, it's still going out.

But at the end the hyphen is getting added.

Even here we are getting the same output.

When I started today’s segment, I told you that there are many such possibilities in CSS where we get the same output which is browser dependent.

So here in menu and auto, in both the cases we are seeing that the same output is generated, no matter how much width we keep in each and every case.

So, this was our hyphen.

Guys make sure that when we were generating a width programme, we saw that while adding hyphen property it does not show up.

Till the time you don’t add the keyword, shy, till that time hyphen will not show up.

While programming if you feel that at so and so places you need to put a hyphen, there you have to add &shy, manually in the program.

And whenever the browser will come to know that the division's width is falling short here, the word is not able to be added in the element.

In every such place, hyphens will be explicitly added.

So, this was today’s hyphen. In the example, you can see that we have kept all three values: none, manual and auto.

We have checked all three, so guys this was an example of hyphen, in today’s segment.

If you have any queries or comments, click the discussion button below the video and post there.

This way, you will be able to connect to fellow learners and discuss the course.

Also, Our Team will try to rectify your issues at the earliest and revert to you.

Our next segment is on CSS’s transform and resize property.

Thank you.