Прижать, правый блок к левому, левый выполнить по ширине ссылок - HTML и CSS

Zuldek · 02.08.2025, 00:53

Код:

<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.width {
  width: 630px;
  border:2px solid red;
  padding:10px;
  display:flex;
  > div {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #000;
    border: 1px solid black;
    overflow: hidden;
    margin-right: 10px;
    > a {
        display: inline-block;
        margin-right: 10px;
    }
  }
  > div:last-of-type {background: green}
}
 
</style>
</head>
<body>
 
<div class='width'>
  <div>
    <a>Cras eleifend turpis fames</a>
    <a>Finibus facilisis</a>
    <a>Sed diam urna</a>
    <a>Dis parturient montes</a>
    <a>Ligula congue</a>
  </div>
  <div>Далее</div>
</div>
</body>
</html>

При всем желании, никак не получается выполнить таким образом. Чтобы ширина блока со ссылками, была равна ширине видимых дочерних блоков. Чтобы кнопка "Далее", была рядом со ссылками и не было пропасти

Задача состоит в том, чтобы скрывать ссылку с конца целиком, если та не помещается в ширину и соответственно сделать родителя той же ширины что все вместе взятые, видимые ссылки.

Блоки скрываются целиком, никакой высоты задать не нужно, хорошо. Как сделать?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Прижать левый блок к центру CSS	FleXik	HTML и CSS	3	09.06.2013 16:07
3 div - центр, левый и правый Как?	KWN, lnc	HTML и CSS	2	13.03.2012 00:54
3 div - центр, левый и правый Как?	KWN, lnc	PHP	2	12.03.2012 16:04
Левый и правый Ctrl	Ewgeny Kolyaev	Общие вопросы Delphi	2	02.03.2011 22:37
Прижать левый блок максимально в низ.	rext	HTML и CSS	6	17.07.2010 13:50