Set Dot Color of 'Text-Overflow: Ellipsis'

p {

font-size:3em;/* demo */

  margin:1em;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  width:8em;

  background:#222;

  color:yellow;

  font-weight:bold;

}

span {

  font-weight:normal;

  color:white;

}

<p><span>some text to overflow</span></p>

The ellipsis '...' value is not the right color

It certainly seems to be a bug in IE. It is (for whatever reason) reading the color of first element (or maybe it is the first content) to determine the color of the ellipsis. However, I did find a "work around" for the bug. I would recommend if possible setting this up in some way to just target IE (and only the td elements you are using text-overflow on), but as a proof of concept, this fixes it:

td:before {content: ''; color: black;}

Apparently the first td content that is defining the color need not be real content, because the pseudo content worked.

Styling dots on text-overflow: ellipsis

Inspired by this answer, here is a way of styling the ellipsis.
The downsides of this solution are

1. You have to re-assign your default text-styling
2. You need one more <span> (or what ever) element

.text-overflow

{

  color: blue;

  font-weight: bold;

  font-size: 20px;

  overflow: hidden;

  text-overflow: ellipsis;

  width: 100px;

  white-space: nowrap;

}

.text-overflow > span

{

  font-weight: normal;

  color: black;

  font-size: 14px;

}

<div class="text-overflow"><span>Here is some very nice text indeed. So this is getting long</span></div>

How to show ellipsis (three dots) at the end of a Text line in Android Jetpack Compose?

Both BasicText and Text have overflow and maxLines arguments which can help you.

Text(myText, maxLines = 1, overflow = TextOverflow.Ellipsis)

Here's a full single-line example:

import androidx.compose.material.Text
import androidx.compose.ui.text.style.TextOverflow

@Composable
fun EllipsisExample() {
    Box(modifier = Modifier.width(160.dp)) {
        Text(
            text = "Lorem ipsum dolor sit amet.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

Of course you can tune maxLines to fit your needs:

Text(
    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

How to remove three dots from text-overflow: ellipsis?

You should try clip instead of clipping.

text-overflow:clip;

=====

EDIT:

This should fix your problem:

.clipping-wrapper {

    border: 1px solid #4099ff;

    padding: 0 40px;

    display: inline-block;

}

.clipping{

    white-space: nowrap; 

    width: 200px; 

    overflow: hidden;

    text-overflow: clip; 

}

<div class="clipping-wrapper">

  <p class="clipping">

    Copier Paper A4 Size - 70Gsm (500 Sheets)

  </p>

</div>

<div id="wrapper">
    <div class="example">
        <h1>How to display Text-Overflow:ellipsis dots in center of the text</h1>
        <p><strong>Truncate text using jQuery</strong></p>
        <div class="r">
            <div class="box after pathname" id="dot5">
                <div class="pathname">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae pretium mauris. Ut tincidunt arcu diam, in congue elit efficitur id. Nunc maximus diam et tellus tincidunt, vitae placerat lacus ullamcorper.</div>
            </div>
        </div>
    </div>
</div>

div.r {
    width: 275px;
    background-color:red;
}

div.box {
    border: 1px solid #ccc;
    height: 40px;
    padding: 15px 20px 10px 20px;
}

.pathname {
    height: 25px;
    color:#fff;
    font-size:18px;
}

$(function() {
    $('#dot5 .pathname').each(function() {
        var path = $(this).html().split(' ');
        if (path.length === 0) {
            return;
        }

        var name = path.pop();
        $(this).html(path.join( ' ' ) + '<span class="filename">' + name + '</span>');
        $(this).dotdotdot({
            after: '.filename',
            wrap: 'letter'
        });
    });
});