CODEWITHSUNDEEP
htmlcss
fraser dale
fraser dale

Reputation: 1377

Overflow text align left

When the description cell overflows it overflows showing the center of the text. How can I make it so the left hand side (the start) is the bit that shows. If the text doesn't overflow I want it to center still.

the css I am using is the following

.td {
    display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
padding: 0.5em;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis ;
min-width: 0px;
white-space: nowrap;
border-bottom: 1px solid #d0d0d0;
}

.td :hover{
white-space: normal;
}

Here is a codepen of what I currently have https://codepen.io/anon/pen/rpWpve

Upvotes: 2

Views: 1173

Answers (3)

Tim
Tim

Reputation: 1

Create an inner div with margin: auto; to center the text/content while it's not overflowing. Using justify-content: flex-start for your td class will then prevent the inner div from overflowing to the left when it is too big for the container. Example shown below

.container {
  justify-content: flex-start; /* use flex-start for the container */
  display: flex;
  text-wrap: nowrap;
  overflow: show;
  width: 200px;
  outline: 1px solid #000;
  margin-bottom: 10px;
}

.inner-container {
  margin: auto; /* use margin: auto for the inner container to center-justify */
  background-color: #cdf
}
<div class="container">
  <div class="inner-container">
    centered text
  </div>
</div>
<div class="container">
  <div class="inner-container">
    text that overflows the container and maintains left-alignment
  </div>
</div>

Upvotes: 0

Eric
Eric

Reputation: 331

Alternatively, set the <span>'s max-width

.td > span {
  max-width:100%;
}

Text was left-aligned within the span, but the span was centered and extended beyond the sides of the div.

Upvotes: 2

andrewgi
andrewgi

Reputation: 632

You can change justify-content for that cell to flex-start

<div class="td" style="justify-content: flex-start;">
  <span>A really long string of numbers or characters which will overflow</span>
</div>

https://codepen.io/andrewgi/pen/Leberz

Upvotes: 2

Related Questions