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

How to handle long word in html when using grid?

I have created a div using display grid to have column structure.

<div id="two-column-structure">
    <div></div>
    <div></div>
</div>

style using css

div.two-column-structure {
    display: grid;
    grid-template-columns: 1fr 380px;
}

but when I write some big word in the first column like
asdjlkasjdlkjsalkdjalskjdlkajsdlakjsdlkajsdlkasjdlkasjdlasjdlkfahskldhfalksdjhflakjsdhflaksjdhflkasaklsjdhfaklsdhflaksdhflkajsdhlafkjdshflkajfsdhlfkajshdlkfajhsdlfjashdlkfjashdlkjahskldsfjhalskdjf

the layout have overflow-x and my design gets meshed.

I know that who would do that but I think that might be case.

.two-column {
  display: grid;
  grid-template-columns: 1fr 380px;
  padding: 12px;
  border: 1px solid red;
  margin-bottom: 10px;
}

.two-column div {
  padding: 10px;
}

.two-column-i-tried {
  display: grid;
  grid-template-columns: 1fr 380px;
  padding: 12px;
  border: 1px solid green;
  margin-bottom: 10px;
}

.two-column-i-tried div:first-child {
  border: 1px solid blue;
  text-overflow: ellipse;
  overflow: hidden;
}
<div class="two-column">
  <div> slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
  </div>
  <div>
    Right Column
  </div>
</div>

<div class="two-column">
  <div> 
    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
  </div>
  <div>
    Right Column
  </div>
</div>

<div class="two-column-i-tried">
  <div>  slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg
  </div>
  <div>
    Right Column
  </div>
</div>


<div class="two-column-i-tried">
  <div> 
    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
  </div>
  <div>
    Right Column
  </div>
</div>

In the html snippet when I use text-overflow and overflow for handling that long text it do not show ellipses as shown in the code

Tags:

3

Answers


  1. 0

    Try out.
    grid-template-columns: repeat(3, 1fr);
    repeat(3, 1fr) is Creates 3 columns of equal width.

    <style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
    grid-gap: 20px; /* Sets the gap between grid items */
  }
  
  .grid-item {
    /* Define styles for the grid items */
  }
</style>

<div class="grid-container">
  <div class="grid-item">    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
</div>
  <div class="grid-item">    Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div
</div>
  <div class="grid-item">Column 3</div>
</div>
    Login or Signup to reply.
  2. 0

    TheWorrier, Try this, we can used text-overflow: "…"

    .two-column-i-tried div:first-child {
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: "…";
    }

    Login or Signup to reply.
  3. 0

    Try this:

    .two-column div {
  padding: 10px;
  word-break: break-word; 
}

    The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

    More information about the property: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search