With CSS, is there any way to change the style of Text-Overflow:Ellipsis?

Asked

Viewed 197 times

6

Imagine I have a situation where the text is bigger than the container, then I’ll use text-overflow: ellipsis to place the 3 dots ... showing that the text continues and there inside the container has more content, so far so good.

The problem is I want to customize mine ... with another color and wanted in bold. Hand didn’t find a way to do that. I’d like something like the image below

inserir a descrição da imagem aqui

Is there any way to customize the text-overflow: ellipsis in a style different from that already applied in container with the text?

What I have so far is this:

div.b {
    white-space: nowrap; 
    width: 70px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}
<div class="b">Hello world!</div>

html css html5 css3 ux

1 answer

0


I think this is what you want. Out overflow ingles

  1. you have to rewrite the default text-styling
  2. you’re gonna need <span> (or any other) 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>

  • 2

    Since the answer does not seem to be originally yours, please have common sense and refer to the source from which you got the solution (https://stackoverflow.com/a/37594427/1452488). And, taking advantage, in the question there is only one element in HTML, in its solution it took two. What are the (positive and negative) implications of doing so?

  • 1

    Okay worked, but could you explain why it worked? That’s what you already had in the English answer quoted by Anderson. And if my component doesn’t accept an extra tag inside it, has some solution for it not to break?

  • as referred to in English (If the Ellipsis is taking the color of the div, then make the div the color you want the Ellipsis to be, and use .color to set the initial text black.) if the elipsis is to have the color of the div then changes the color in the div to the color you want

  • because it would not accept an extra tag there is no tag limit in html so I know if this is what you are asking if it is for content reasons you can always for a display: inline block ( and so the content is in line) you can also use white-space: nowrap; avoids breakage in white space

  • 2

    I think what they’re trying to explain to you is that the important thing is not just explaining "how to do" but explaining "why it works" or "how it works". A higher quality answer is important, as this page will be visited in the future by other people with the same question. Do you understand? It’s nothing personal at all.

  • I just answered his question when I saw the answer below in the comments I corrected my post and put the reference to the post in English I said nothing only corrected because I’m new here and I realized wrong if you want to give a more complete answer are the will of the person who did the question has the possibility to give its points to those who answer it more correctly I just gave a reference

  • 1

    That is what I meant, your answer is good. I do not know how to do what the questioner asks, so I will not answer. What I’m trying to say is that your answer is already good, you just need more information.

Show 2 more comments

Browser other questions tagged html css html5 css3 ux

You are not signed in. Login or sign up in order to post.