FANDOM


  • I have made a vertical tabber out of the flex display. I don't want to see the overlapping text aside from overflow hidden because my plan is to bring the overlapped text into new lines but I don't know how to do.

    Please help meĀ :(

    Screenshot (6)
      Loading editor
    • Please link to the example rather than just giving a screenshot. That said, my guess would be that you just need to use "word-break". It is not mentioned on the page I linked to but you probably want to avoid using the value "break-word" since it is supported by fewer browsers compared to the other values and a similar effect can be achieved by setting both "word-break" and "word-wrap".

        Loading editor
    • It doesn't work at all. btw, this is the code that i used:

      .tabber-v div.tabberlive {
          display:flex;
          align-items: stretch;
          justify-content: space-around;
          overflow: hidden;
      }
      .tabber-v .tabberlive .tabbernav {
          background: var(--background-contrastgradientrow) !important;
          width: 25% !important;
          min-height: 100% !important;
          margin: 0 !important;
          padding: .5em !important;
          border-radius: 20px 0 0 20px !important;
      }
       
      .tabber-v .tabberlive .tabbernav li {
          display: block !important;
          margin-left:5px !important;
          word-break: break-all !important;
          word-wrap: break-word !important;
          padding-right: 5px !important;
      }
       
      .tabber-v .tabberlive .tabbernav a {
          margin: 0;
          border: none !important;
          background: none !important;
      }
       
      .tabber-v .tabberlive .tabbertab {
          width:75% !important;
          min-height:100% !important;
          margin: 0 !important;
          padding: .5em !important;
          border-radius:0 20px 20px 0 !important;
      }
      

      Tell me where my wrong is.

        Loading editor
    • Hi

        Loading editor
    • You can't always tell from looking at just what one assumes to be the only relevant CSS. CSS can interact with other CSS and other parts of the page layout. So without a link to the page where you tried with with the failed attempt still there, I cannot simply tell you what is wrong.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.