Entrar | Registrar | FAQ
Anonymous

overflow and word wrap isnt working like i thought

+ Postar uma resposta

2 Mensagens Página 1 de 1


overflow and word wrap isnt working like i thought

por christianl » Ter Abr 24, 2018 4:01 pm

I am trying to remove the scroll bar, word-wrap the text and adjust the list div tag height based on the mount of content. the blue marker will be a repeated bar based on the # of list items. The header will have an image left-aligned about 55 x 55 px. I'm having trouble completing these tasks. I attached a screen shot and my code. thanks



Código: Selecionar tudo
         #list{
            border-top: 5px solid #00A2E0;
                width: 280px;
                border-left: 1px solid #D8E0E3;
                border-right: 1px solid #D8E0E3;
                border-bottom: 1px solid #D8E0E3;

         }
           
            #listHeader{
                height: 25px;
                font-size: 24px;
                padding: 15px 0 15px 0;
                vertical-align: middle;
                width: inherit;
                background-image: url(HapNow.png)
                background-repeat: no-repeat;
                background-color: aliceblue;
                font-family: tahoma;
            }

            #col-marker{
             border-left: 3px solid #00A2E0;
                width: 5px;   
             
                padding: 0 0 10px 10px;
                float: left;
         
         }

         #listItem{
                padding: 15px 10px 10px 10px;
                height: 100%;
                overflow-wrap: break-word;
                word-wrap: break-word;
                overflow:auto;
                display: flex;
           
}
Código: Selecionar tudo
<!DOCTYPE html>
<html>
   <head>
        <link rel="stylesheet" type="text/css" href="./css/style.css">
   </head>
   <body>
            <div id="list">
                <div id="listHeader">Header Here - Image left</div>
              <div id="listItem">
                 <div id="col-marker"></div>
RoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoom 1
           </div>
        </div>
   </body>
</html>

Anexos

  1. webpart.PNG (9.48 KiB) Baixado 329 vezes

Avatar de usuário

christianl

  • Mensagens: 2
  • Data de registro: Ter Abr 24, 2018 3:43 pm

Re: overflow and word wrap isnt working like i thought

por christianl » Ter Abr 24, 2018 4:20 pm

by adding: word-wrap: break-word; overflow:hidden to - listitems . AND removing: display: flex. i fix the word wrap issue BUT the col-marker doesnt extend the hieght along with the text, its only about 10 px in height. thats not how it needs to work. thx
Avatar de usuário

christianl

  • Mensagens: 2
  • Data de registro: Ter Abr 24, 2018 3:43 pm


+ Postar uma resposta

Página 1 de 1