Почему текст не растягивается на всю длину?
Здрасте. Внизу есть картинки и код. Проблема заключается в том что текст не растягивается на всю длину, уже час сижу не могу понять в чём дело можете объяснить в чём проблема.
Вот как должен выглядеть текст:
Вот как получается:
HTML:
<div class="container"> <!-- NAV BAR --> <ul class="navigation-block__bar"> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">SERVICES</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1" >MOBILE APPLICATION DEVELOPMENT</a > </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1" >GAME DEVELOPMENT OUTSOURCING</a > </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">VR APP DEVELOPMENT</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">DEDICATED DEVELOPERS </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">SDK DEVELOPMENT </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">3D MODELING SERVICES </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">AR APP DEVELOPMENT</a> </li> </div> </ul> </li> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">TECHNOLOGIES</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">IOS</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">ANDROID</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">UNITY</a> </li> </div> </ul> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">PRODUCTS</a> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">PORTFOLIO</a> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">BLOG</a> </li> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">ABOUT US</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">CONTACTS</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">TEAM</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">JOIN THE TEAM</a> </li> </div> </ul> </li> </ul> </div> |
<div class="container"> <!-- NAV BAR --> <ul class="navigation-block__bar"> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">SERVICES</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1" >MOBILE APPLICATION DEVELOPMENT</a > </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1" >GAME DEVELOPMENT OUTSOURCING</a > </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">VR APP DEVELOPMENT</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">DEDICATED DEVELOPERS </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">SDK DEVELOPMENT </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">3D MODELING SERVICES </a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">AR APP DEVELOPMENT</a> </li> </div> </ul> </li> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">TECHNOLOGIES</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">IOS</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">ANDROID</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">UNITY</a> </li> </div> </ul> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">PRODUCTS</a> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">PORTFOLIO</a> </li> <!-- ITEM --> <li class="navigation-bar__item"> <a href="#" class="component-te-1">BLOG</a> </li> <!-- ITEM --> <li class="navigation-bar__item --list --active"> <a href="#" class="component-te-1">ABOUT US</a> <!-- ARROW IMG --> <div class="--list-arrow"> <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" /> </div> <!-- LIST --> <ul class="navigation--list-group"> <div class="navigation--list-group__container"> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">CONTACTS</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">TEAM</a> </li> <li class="navigation--list-group-item"> <a href="#" class="component-te-1">JOIN THE TEAM</a> </li> </div> </ul> </li> </ul> </div>
CSS:
.navigation-block { width: 100%; background-color: rgba(33, 33, 33, 0.3); backdrop-filter: drop-shadow(0px 4px 12px rgba(24, 9, 96, 0.1)); padding: 19px 0; display: flex; justify-content: space-between; align-items: center; } /* LOGO */ .navigation-block__logo { } .navigation-block__logo img { width: 205px; } /* NAV BAR */ .navigation-block__bar { display: flex; column-gap: 20px; } .navigation-bar__item { position: relative; display: flex; align-items: center; } .navigation-bar__item::before { content: ""; position: absolute; width: 0%; height: 3px; border-radius: 50px; background-color: white; bottom: -10px; transition: all linear 0.15s; } .navigation-bar__item:hover::before { width: 100%; } .navigation-bar__item.--active::before { opacity: 0; } .navigation-bar__item a { } .--list { } .--list-arrow { } /* --LIST */ .navigation--list-group { background-color: rgba(33, 33, 33, 0.3); top: 30px; position: absolute; } .navigation--list-group::before { content: ""; position: absolute; width: 100%; height: 3px; background-color: var(--blue); top: -3px; } .navigation--list-group__container { display: flex; row-gap: 10px; flex-flow: column wrap; margin: 15px 0 0 12px; padding: 0 10px 10px 0; } .navigation--list-group-item a { display: flex; width: 100%; } /* BTN */ .navigation-block__btn { width: 160px; } /* DEFAULT SETTINGS */ * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; scroll-behavior: smooth; border: none; text-decoration: none; list-style: none; color: black; /* -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; */ z-index: 1; } input { background-color: transparent; } button { display: block; } body { position: relative; } |
.navigation-block { width: 100%; background-color: rgba(33, 33, 33, 0.3); backdrop-filter: drop-shadow(0px 4px 12px rgba(24, 9, 96, 0.1)); padding: 19px 0; display: flex; justify-content: space-between; align-items: center; } /* LOGO */ .navigation-block__logo { } .navigation-block__logo img { width: 205px; } /* NAV BAR */ .navigation-block__bar { display: flex; column-gap: 20px; } .navigation-bar__item { position: relative; display: flex; align-items: center; } .navigation-bar__item::before { content: ""; position: absolute; width: 0%; height: 3px; border-radius: 50px; background-color: white; bottom: -10px; transition: all linear 0.15s; } .navigation-bar__item:hover::before { width: 100%; } .navigation-bar__item.--active::before { opacity: 0; } .navigation-bar__item a { } .--list { } .--list-arrow { } /* --LIST */ .navigation--list-group { background-color: rgba(33, 33, 33, 0.3); top: 30px; position: absolute; } .navigation--list-group::before { content: ""; position: absolute; width: 100%; height: 3px; background-color: var(--blue); top: -3px; } .navigation--list-group__container { display: flex; row-gap: 10px; flex-flow: column wrap; margin: 15px 0 0 12px; padding: 0 10px 10px 0; } .navigation--list-group-item a { display: flex; width: 100%; } /* BTN */ .navigation-block__btn { width: 160px; } /* DEFAULT SETTINGS */ * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; scroll-behavior: smooth; border: none; text-decoration: none; list-style: none; color: black; /* -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; */ z-index: 1; } input { background-color: transparent; } button { display: block; } body { position: relative; }
Дополнительно:
потому что вот этот вот блок.navigation-bar__item у тебя относительный, а вложенный в него li абсолютный по относительно его, соотвественно иммет максимальную ширину своего родителя
поэтому , если ты уберёшь.navigation-bar__item position: relative, ты получишь нужное тебе новедение
самое простое
.navigation--list-group-item { white-space: nowrap; } |
.navigation--list-group-item { white-space: nowrap; }
- Вау. Спасибо вам за быструю помощь!
- DZHAMBULAT-SAMOUCHKA, размести в последний пункт ссылку на ссылку с длинным текстом
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с текстом, который не растягивается на всю длину, может возникать из-за нескольких возможных причин. Вот несколько шагов, которые можно предпринять, чтобы решить эту проблему:
1. **Проверьте CSS стили**: Убедитесь, что у элемента, содержащего текст, нет ограничений по ширине. Используйте свойство CSS `width: 100%;` или `width: 100vw;`, чтобы текст занимал всю доступную ширину.
2. **Используйте CSS flexbox или grid**: Если вы используете CSS flexbox или grid для размещения элементов на странице, убедитесь, что правильно заданы свойства для растяжения текста на всю доступную ширину.
3. **Проверьте контейнеры**: Убедитесь, что контейнер, содержащий текст, не имеет фиксированной ширины, которая может ограничивать растяжение текста.
4. **Избегайте жесткого переноса строк**: Если у вас есть длинный текст без пробелов, который не растягивается на всю ширину, возможно, он будет перенесен на следующую строку из-за свойства CSS `word-wrap: break-word;`. Попробуйте убрать это свойство или заменить на `word-wrap: normal;`.
Приведу пример использования CSS для растяжения текста на всю ширину в случае использования языка программирования PHP:
<div style="width: 100%"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec nisi vitae libero lacinia elementum. Sed ac tincidunt neque. Integer sit amet ipsum vel lorem efficitur fermentum.</p> </div>
Если после применения вышеперечисленных шагов проблема не будет решена, попробуйте обновить страницу или проверить другие стили, которые могут влиять на ширину текста.