Question 200331 in Html Question posted in
Some basic documentation can be found here.

Html – The text in the span element and the border length of the span do not equal

.text{
  max-width: 200px;
  border-bottom: 1px dotted;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
<span class="text">dsagjadsldsagjadsldsagjadsldsagjadsldsagjadsldsagjadsldsagjadsl</span>

When the text is very long, the bottom border is slightly wider than the text.
Is there any solution to make both strictly the same length?

goal

I think it may be caused by not being able to accommodate the truncated first character.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    enter image description here

    It's seems like this


  2. 0

    To ensure that the border length matches the text length exactly, you can make use of a container element with relative positioning. By adding a pseudo-element to the container with an absolute position, you can achieve the desired effect. Here’s an updated version of your code:

    .container {
  position: relative;
  display: inline-block;
}

.text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.container::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  border-bottom: 1px dotted;
}
    <div class="container">
  <span class="text">dsagjadsldsagjadsldsagjadsldsagjadsldsagjadsldsagjadsldsagjadsl</span>
</div>

    In this updated code, the .container element acts as a wrapper around the .text element. The ::after pseudo-element is added to the container, and it creates a border that matches the width of the text, even when it’s truncated.

    This way, the border will always be the same length as the visible text, regardless of whether it’s truncated or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search