Creating a new line of text below the existing one when setting the white-space property back to nor-CodePudding

I'm working on a Google imitation project. Currently, I'm making the apps menu: Screenshot of the menu

If the name of the google service is long enough to occupy two lines, then just the first line will be shown with some ellipsis, like this: Service's name occupying one line

If you hover over the service, then the text will be shown completely, like this: Service name complete

To imitate this effect, I put the image, within a div, and the text in a wrapper with the class name app-container, creating the following HTML:

                <div >
                    <ul >
                        <li >
                            <div ><img src="images/applogos/profile-photo.svg" alt="" id="user-profile-picture-for-apps" ></div>
                            <p >Cuenta</p>
                        </li>
                        <li >
                            <div ><img src="images/applogos/search.svg" alt="" ></div>
                            <p >Búsquda</p>
                        </li>
                        <li >
                            <div ><img src="images/applogos/bussisnes-logo.svg" alt="" ></div>
                            <p >Perfil de Empresa</p>
                        </li>
                    </ul>
                </div>

To achieve the text abbreviation described before, I have the following CSS applied to the paragraph with the name of the service:

.app-name
{
    position: absolute;
    bottom: 0;
    text-align: center;
    max-width: 11ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Whenever you hover over the service name, I just set the white-space property to normal. It works. However, it creates a second line of text above the existing one and not below as the google web page does:

The second line of the paragraph is created below the existing one (As I want)

The second line of the paragraph is created above the existing one (As I don't want to)

I have to say that the paragraph in which the name of the service is has a position property of "absolute", whereas the wrapper of the image is just an element centered in a flexbox display.

Please, help me to solve the issue.

If you need any extra information, please tell me. It's my first time posting a question in stack overflow, so I apologize if something is wrong with the post.

Thank you very much!

CodePudding user response：

Using your snippets as a starting point I was able to reproduce the error. In my case, swapping bottom: 0 to top: 0 fixed the alignment.

<head>
    <style>
            .google-apps-menu-container
            {
                background-color: red;
            }
            .google-apps-menu
            {
                background-color: blue;
                display: inline-block;
            }
            .app-container
            {
                width: 50;
                height: 50;
                display: inline-block;
                position: relative;
            }
            .app-name
            {
                position: absolute;
                top: 0;
                text-align: center;
                max-width: 11ch;
                overflow: hidden;
                /* white-space: nowrap; */
                text-overflow: ellipsis;
            }
    </style>
</head>
<body>
    <div >
        <ul >
            <li >
                <div ><img src="images/applogos/profile-photo.svg" alt="" id="user-profile-picture-for-apps" ></div>
                <p >Cuenta</p>
            </li>
            <li >
                <div ><img src="images/applogos/search.svg" alt="" ></div>
                <p >Búsquda</p>
            </li>
            <li >
                <div ><img src="images/applogos/bussisnes-logo.svg" alt="" ></div>
                <p >Perfil de Empresa</p>
            </li>
        </ul>
    </div>
</body>
    ```

CodePudding user response：

What you need is actually very easy. Just make all icons the same height and add text below icons. Do not use position absolute, just basic layout with flex.

.container {
  width: 300px;
  height: 500px;
  padding: .5rem;
  background-color: #222;
  color: #fff;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col {
  width: 70px;
  padding: .5rem;
  margin-bottom: .5rem;
  border: 1px solid red;
  border-radius: 1rem;
}

.col:hover {
  background-color: #666;
}

.icon {
  width: 100%;
  height: 60px;
  margin-bottom: .25rem;
  border: 1px solid yellow;
}

.text {
  border: 1px solid pink;
}

<div >
  <div >
  
    <div >
      <div >ICON</div>
      <div >Lorem Ipsum</div>
    </div>

    <div >
      <div >ICON</div>
      <div >Lorem</div>
    </div>

    <div >
      <div >ICON</div>
      <div >Lorem</div>
    </div>

    <div >
      <div >ICON</div>
      <div >Lorem</div>
    </div>

    <div >
      <div >ICON</div>
      <div >Lorem</div>
    </div>

    <div >
      <div >ICON</div>
      <div >Lorem</div>
    </div>
  
  </div>
</div>