CSS 12 💻 text combine upright, text underline offset, text underline position and text overflow pro

text-combine-upright → controls how characters within a word are combined when they exceed the size of its container
values → none, all and global values
example 1 → This is the default value and it does not combine characters 
example 2 → this value combines all characters in a word, regardless of their shape
text-underline-offset → sets the distance of an underline decoration
values → auto, length( 3px...), percentage (%) and global values
example 1 → this is the default value and it automatically places the underline below the text 
example 2 → This value moves the underline down by 2 pixels

text-underline-position  → specifies the position of the underline
values → auto, under, left, right and global values
example 1 → This is the default value and it places the underline below the text
example 2 → this value places the underline below the text
example 3 → this value places the underline to the right of the text
example 4 → This value places the underline to the left of the text

text-overflow → sets how hidden content will be displayed
values → clip, eclipsis and global values
global values: inherit  → values should be changed to the inherited values
initial → values to the initial values
unset → if they inherit then to inherited values otherwist to initial values
and revert, revert-layer
example 1 → This value clips the overflow text
example 2 → This value adds an ellipsis (...) to indicate that text has been clipped

12 – text-combine-upright, text-underline-offset, text-underline-position and text-overflow properties

<p class="text-combine-upright-none">This is a sample text without any combined characters.</p>
<p class="text-combine-upright-all">This is a sample text with all characters combined using the 'All' value. However, it may not be supported in some browsers or for all languages.</p>
<p class="text-underline-offset-auto">This is a sample text with an automatically placed underline below it.</p>
<p class="text-underline-offset-2px">This is a sample text with the underline offset down by 2 pixels.</p>

<p class="text-underline-position-auto">This is a sample text with an automatically placed underline below It.</p class="text-underline-offset-5px">
<p class="text-underline-position-under">This is a sample text with the underline below the text.</p class="text-underline-offset-5px">
<p class="text-underline-position-right">This is a sample text with the underline to the right of the text.</p class="text-underline-offset-5px">
<p class="text-underline-position-left">This is a sample text with the underline to the left of the text.</p class="text-underline-offset-5px">

<div class="overflow-clip">This is a sample text that will be clipped if it exceeds the box's width.</div>
<div class="overflow-ellipsis">This is a sample text that will show an ellipsis (...) If it exceeds the box's width.</div>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.text-combine-upright-none {
    text-combine-upright: none; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-combine-upright-all {
    text-combine-upright: all;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-offset-auto {
    text-decoration: underline; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-offset-2px {
    text-decoration: underline; 
    text-underline-offset: 2px; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-auto {
    text-decoration: underline;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-under {
    text-decoration: underline; 
    text-underline-position: under; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

   .text-underline-position-right {
    text-decoration: underline; 
    text-underline-position: right; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.text-underline-position-left {
    text-decoration: underline; 
    text-underline-position: left; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.overflow-clip {
    width: 100px;
    white-space: nowrap;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-overflow: clip; 
}

 .overflow-ellipsis {
    width: 100px;
    white-space: nowrap;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-overflow: ellipsis; 
}