Question

0

80

Views

Add an early ellipsis if child is wider than parent

I am using text-overflow: ellipsis; for overflowing text of a child element.

In the case that the child element is wider than the parent element, the ellipsis cannot be seen.

input {
  border: 1px solid black;
  text-overflow: ellipsis;
  width: 100px;
}

div {
  border: 1px dotted black;
  width: 80px;
  overflow: clip;
}

/* Simulate overflow: clip; for Safari */
div > input {
  clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%);
}

<input type="text">
<div><input type="text"></div>

Current behaviour:

Desired behaviour:

I can't artificially make the child's width property smaller in my case, because another CSS rule depends on it (for min-content of an input element, considered contentless unless width specified)

Unfortunately there's no overflow: ellipsis; and adding text-overflow: ellipsis; on the parent doesn't fix it.

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T10:10:14.999Z

you can't make the input wider that it's div container and choose where the ellipsis starts in the input .. you can make the input 100px wide and the div 80px and it works but you can't see the result because the div is preventing the rest of the input from showing, and it doesn't make sense to do it in the first place.

just make the overflow of the input is hidden and the white-space: nowrap and make the width of the input same as it's container and it works just fine

input {
  border: 1px solid black;
  text-overflow: ellipsis;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

div {
  border: 1px dotted black;
  width: 80px;
  overflow: clip;
}

/* Simulate overflow: clip; for Safari */
div > input {
  clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%);
  width: 100%;    
}

<input type="text">
<div><input type="text"></div>

Answer 2 · 2022-07-13T10:10:15.007Z

Why Not Define classes to them so it will not affect other elements?

Like in the Example Below: I Have defined input-1 and class-1 as the class for different inputs

.input-1 {
  border: 1px solid black;
  text-overflow: ellipsis;
  width: 100px;
}

.class-2 {
  border: 1px dotted black;
  width: 80px;
  overflow: clip;
  text-overflow: ellipsis;
}

/* Simulate overflow: clip; for Safari */
div > input {
  clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%);
}

<input type="text" class="input-1">
<div><input type="text" class="class-2"></div>