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

Long text causes resize of flex box – Html

This has been driving me nuts. Every solution I find doesn’t work. Can someone please – once and for all instruct me on how to fix this issue:

Two flex boxes side by side inside a flex display.
Flex box 1 contains long text which needs to be shorted with ellipses. Instead, the long text causes a resize of the flex box 1. I do not want either flex box to resize or reposition based on the contents.

.wrapper {
  width: 50%;
  display: flex;
  background-color: green;
}

.container {
  flex: 1;
  margin: 10px;
  border: 2px solid blue;
  height: 200px;
  background: pink;
}

span {
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="wrapper">
  <div class="container">
    <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </span>
  </div>
  <div class="container"></div>
</div>
Tags:

2

Answers


  1. 0

    If you are wanting the 2 boxes to stay equal width, I would just add a width to them (you’ll also need to give your span a width to make the ellipsis work):

    .wrapper {
  width: 50%;
  display: flex;
  background-color: green;
}

.container {
  flex: 1;
  margin: 10px;
  border: 2px solid blue;
  height: 200px;
  background: pink;
  width: calc(50% - 20px);  /* 20px is the left and right margin */
  box-sizing: border-box;   /* add this so width includes your border */
}

span {
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;            /* add this so you can give the span a width so the ellipsis will work */
  width: 100%;
}
    <div class="wrapper">
  <div class="container">
    <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </span>
  </div>
  <div class="container"></div>
</div>
    Login or Signup to reply.
  2. 0

    First, get rid of the <span> and put that information into the first <div> with the class = "container" and get rid of the second <div> container class, but keep the first one. In CSS, remove .span, and in .container, add overflow: scroll;

    wrapper {
  width: 50%;
  display: flex;
  background-color: green;
}

.container {
  flex: 1;
  margin: 10px;
  border: 2px solid blue;
  height: 200px;
  overflow: scroll;
  background: pink;
}
    <div class="wrapper">
  <div class="container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search