• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

118
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:

enter image description here

Desired behaviour:

enter image description here

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.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error