Show Less, Search More
Show Less, Search More
Show Less, Search More: Making Truncated Text Findable with CSS
<main>
<div class="container">
<div class="table-wrapper">
<div class="table-overflow">
<div class="table-container">
<table class="table">
<thead>
<tr>
<th scope="col" class="th th-name">Name</th>
<th scope="col" class="th">Title</th>
<th scope="col" class="th">Description</th>
<th scope="col" class="th">Email</th>
<th scope="col" class="th">Role</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td class="td td-name">Lindsay Walton</td>
<td class="td td-regular">Front-end Developer</td>
<td class="td td-regular">
<p>Specializes in React and modern web technologies with extensive experience in building responsive user interfaces, state management, and performance optimization. Passionate about accessibility and creating seamless user experiences across all devices.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Member</td>
</tr>
<tr>
<td class="td td-name">Courtney Henry</td>
<td class="td td-regular">Designer</td>
<td class="td td-regular">
<p>UI/UX design and product strategy expert with over 10 years of experience in creating user-centered designs. Specializes in design thinking methodologies, user research, and translating complex business requirements into intuitive and visually appealing interfaces.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Admin</td>
</tr>
<tr>
<td class="td td-name">Tom Cook</td>
<td class="td td-regular">Director of Product</td>
<td class="td td-regular">
<p>Leads product vision and roadmap planning with a focus on data-driven decision making and customer feedback. Works closely with engineering, design, and marketing teams to deliver innovative solutions that meet market needs and drive business growth.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Member</td>
</tr>
<tr>
<td class="td td-name">Whitney Francis</td>
<td class="td td-regular">Copywriter</td>
<td class="td td-regular">
<p>Creates compelling content and messaging across multiple platforms including web, mobile, email campaigns, and social media. Expert in brand voice development, storytelling, and crafting clear, persuasive copy that resonates with target audiences and drives conversions.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Admin</td>
</tr>
<tr>
<td class="td td-name">Leonard Krasner</td>
<td class="td td-regular">Senior Designer</td>
<td class="td td-regular">
<p>Design systems and brand identity specialist with deep expertise in creating scalable design frameworks. Ensures consistency across products through comprehensive component libraries, style guides, and documentation. Champions design excellence and maintains visual coherence throughout the organization.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Owner</td>
</tr>
<tr>
<td class="td td-name">Floyd Miles</td>
<td class="td td-regular">Principal Designer</td>
<td class="td td-regular">
<p>Leads design team and creative direction with a strategic mindset focused on innovation and user satisfaction. Mentors junior designers, establishes design best practices, and collaborates with stakeholders to align creative vision with business objectives and brand values.</p>
</td>
<td class="td td-regular">[email protected]</td>
<td class="td td-regular">Member</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<style>
.container {
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
}
.table-wrapper {
margin-top: 2rem;
overflow: hidden;
}
.table-overflow {
margin: -0.5rem -1rem;
overflow-x: auto;
}
@media (min-width: 640px) {
.table-overflow {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
}
@media (min-width: 1024px) {
.table-overflow {
margin-left: -2rem;
margin-right: -2rem;
}
}
.table-container {
display: inline-block;
min-width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
vertical-align: middle;
}
@media (min-width: 640px) {
.table-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.table-container {
padding-left: 2rem;
padding-right: 2rem;
}
}
.table {
position: relative;
min-width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table thead {
border-bottom: 1px solid rgb(209 213 219);
}
@media (prefers-color-scheme: dark) {
.table thead {
border-bottom-color: rgba(255 255 255 / 0.15);
}
}
.th {
padding: 0.875rem 0.75rem;
text-align: left;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: rgb(17 24 39);
}
@media (prefers-color-scheme: dark) {
.th {
color: rgb(255 255 255);
}
}
.th-name {
padding-right: 0.75rem;
padding-left: 1rem;
}
@media (min-width: 640px) {
.th-name {
padding-left: 0;
}
}
.tbody {
border-top: 1px solid rgb(229 231 235);
}
.tbody tr {
border-bottom: 1px solid rgb(229 231 235);
}
@media (prefers-color-scheme: dark) {
.tbody {
border-top-color: rgba(255 255 255 / 0.1);
}
.tbody tr {
border-bottom-color: rgba(255 255 255 / 0.1);
}
}
.td {
padding: 1rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
white-space: nowrap;
}
.td-name {
padding-right: 0.75rem;
padding-left: 1rem;
font-weight: 500;
color: rgb(17 24 39);
}
@media (min-width: 640px) {
.td-name {
padding-left: 0;
}
}
@media (prefers-color-scheme: dark) {
.td-name {
color: rgb(255 255 255);
}
}
.td-regular {
color: rgb(107 114 128);
}
.td:nth-child(3) p {
width: 400px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
.td-regular {
color: rgb(156 163 175);
}
}
</style>