Zawijanie tekstu w menu

pytanie zadane 29 lutego w HTML i CSS przez whiteman808 Obywatel (1,840 p.)

Powiedzmy że chcę ustawić rozmiar każdego elementu menu na jakąś stałą wielkość na przykład 40px.

Mam taki kod jak poniżej

index.php

<?php
declare(strict_types=1);
session_start();

if (!isset($_SESSION['auth_user'])) {
    $_SESSION['auth_user'] = false;
}
$action = $_GET['action'] ?? null;

function getPageContent(): void
{
    $action = $_GET['action'] ?? null;
    switch ($action) {
        case 'login':
            include 'templates/user/login.php';
            break;
        case 'register':
            include 'templates/user/register.php';
            break;
        case 'logout':
            header('Location: actions/user/logout.php');
            break;
        case 'edit_profile':
            include 'templates/user/edit_profile.php';
            break;
        case 'new_entry':
            include 'templates/guestbook/new_entry.php';
            break;
        default:
            include 'templates/guestbook/list_entries.php';
    }
}
if (!isset($page_title)) {
    $page_title = 'Index';
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <title>Guest book - <?=$page_title?></title>
</head>
<body>
    <header class="page-header">
        <h1>Guest book</h1>
        <p>Yet another page written in PHP</p>
    </header>
    <nav>
        <ul>
            <li><a href="index.php">Index</a></li>
            <li><a href="index.php?action=new_entry">New entry</a></li>
            <?php if ($_SESSION['auth_user']): ?>
            <li><a href="index.php?action=edit_profile">Edit profile</a></li>
            <li><a href="actions/user/logout.php">Logout</a></li>
            <?php else: ?>
            <li><a href="index.php?action=register">Register</a></li>
            <li><a href="index.php?action=login">Login</a></li>
            <?php endif; ?>
        </ul>
    </nav>
    <main>
        <h2><?=$page_title?></h2>
        <?php getPageContent(); ?>
    </main>
    <footer class="page-footer">
        <p>Made by whiteman808</p>
    </footer>
</body>
</html>

css/styles.css

body {
    background-color: #ffffcc;
    width: 60%;
    margin: 0 auto;
}

nav ul {
    list-style-position: inside;
    list-style-type: none;
    padding: 0;
    display: inline;
}

nav ul li {
    display: inline-block;
    border: 3px solid #000;
    padding: 5px;
    text-align: center;
    width: 40px;
}

nav ul li:not(:first-child) {
    margin-left: -4px;
}

nav ul li:not(:last-child) {
    border-right: none;
}

nav ul li a {
    color: #000;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

.page-header {
    margin-top: 75px;
}

main {
    margin-top: 75px;
}

.guestbook-entries article:not(:last-child) {
    border-bottom: 1px solid black;
}

.page-footer {
    margin-top: 75px;
    text-align: center;
}

Aktualny rezultat działania kodu jest przedstawiony na rysunku poniżej

Oczekiwany efekt to mniej więcej taki

komentarz 1 marca przez VBService Ekspert (254,260 p.)

BTW, zmienna $action IMO jest zbędna w linii 8 bo później nigdzie w kodzie nie jest wykorzystana, pomijam fakt, że w funkcji getPageContent i tak jest tworzona ponownie zmienna o nazwie $action, która jest "widziana" tylko w scope-ie tej funkcji.

2 odpowiedzi

odpowiedź 29 lutego przez Panelinio Mądrala (5,150 p.)

odpowiedź 29 lutego przez VBService Ekspert (254,260 p.)
edycja 29 lutego przez VBService

Sprawdź z użyciem

  line-break: anywhere;
  text-wrap: balance;

[ przykład działania on-line ]

nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}

nav ul li {
  border: 3px solid #000;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  text-align: center;
  line-break: anywhere;
  text-wrap: balance;
}

nav ul li + li {
  border-left: none;
}

    <nav>
      <ul>
        <li><a href="index.php">Index</a></li>
        <li><a href="index.php?action=new_entry">New entry</a></li>
        <li><a href="index.php?action=register">Register</a></li>
        <li><a href="index.php?action=login">Login</a></li>
      </ul>
    </nav>