Unable to see the effect of text-overflow - html

Question

.textarea {
display: block;
width: 400px;
margin-bottom: 20px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<div class="textarea clip">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five </p>
</div>
<div class="textarea ellipsis">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
Here after setting the value text-overflow:ellipsis ,I am not getting three dot(...) which should come ,if there is more text given that width is not so much enough to accommodate all the text.
I have tried with different width values but no required result is coming.

Answer 1

Because overflow and text-overflow in not an inherited property and you have applied it on .textarea so no effect on the <p> will take place.
You can apply white-space:nowrap to the .textarea as it is an inherited css property.
So apply overflow:hidden and text-overflow to the <p> instead of .textarea..
Also you have a typo error in your above code...textarea will be .textarea because its a class not a tag
Stack Snippet
.textarea {
display: block;
width: 400px;
margin-bottom: 20px;
border: 1px solid black;
white-space: nowrap;
}
.clip p {
text-overflow: clip;
overflow: hidden;
}
.ellipsis p {
text-overflow: ellipsis;
overflow: hidden;
}
<div class="textarea clip">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five </p>
</div>
<div class="textarea ellipsis">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>