Text-Overflow Property
It was possible to hide or show the texts in the HTML elements when they did not fit. Using text-overflow property comes with CSS3, parts that do not fit can be automatically hidden by placing three dots (...).
Examples of using text-overflow:
The text-overflow property is not used for this box. So the standard view.
It can be determined how long texts will behave in case of overflow.
white-space: nowrap; With this property, it was ensured that the text did not go to the bottom. text-overflow: clip; With this property, the overflowing parts are hidden.
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
It can be determined how long texts will behave in case of overflow.
text-overflow: ellipsis; Using text-overflow property, the overflowing parts are hidden by placing three dots (...).
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
It can be determined how long texts will behave in case of overflow.
Word-Wrap Feature
Sometimes, because a word or phrase is too long and does not contain spaces, it cannot be divided and can go beyond the region it is in. By using the word-wrap feature, it can be ensured that the part of the word that does not fit can continue from the bottom line.
Sample:
The word-wrap feature was not used for this box. The word, which did not fit in the box due to its length, protruded.
It can be determined how long words will behave in case of overflow, such as abcçdefgğhiijklmnoöprsştuüvyzabcçdefg.
Here, word-wrap: break-word; using this feature, the word that does not fit is divided and continued from the bottom line.
#box1{
word-wrap: break-word;
}
It can be determined how long words will behave in case of overflow, such as abcçdefgğhiijklmnoöprsştuüvyzabcçdefg.
Word-Break Feature
We can use word-break: break-all if we want not only the words that don't fit, but all the words to be divided from the middle of them to the bottom. Keep-all value allows to go under the hyphens.
Word-break : keep-all; for this box By doing this, it is ensured that the word can be divided by the hyphen.
It can be determined how long words will behave in case of overflow, such as abcçdefgğhiijklmnoöprsştuüvy-zabcçdefg.
word-break: break-all; for this box by using this feature, all words were divided in the middle at the end of the line.
#box3{
word-break: break-all;
}
It can be determined how all words will behave in case of overflow.
css text wrapping, ensuring long words don't overflow, split long words, skip to the bottom, don't fit words to the bottom
EXERCISES
There are no examples related to this subject.
Read 864 times.