CSS overflow-x — вміст, що не вміщується по горизонталі

HTML

<div>Дуже-довгий-рядок-без-пробілів-який-не-вміщається-по-горизонталі-й-обрізається</div>

CSS

div {
    width: 200px;
    overflow-x: hidden;
    white-space: nowrap;
    border: 1px solid #0172ad;
}

HTML

<p>overflow-x: visible</p>
<div class="box vis">
  <div class="strip"><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b></div>
</div>

<p>overflow-x: auto</p>
<div class="box auto">
  <div class="strip"><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b></div>
</div>

CSS

.box {
    width: 220px;
    border: 2px solid #4a6fa5;
    background: #f3f6fa;
    margin-bottom: 24px;
}
.vis  { overflow-x: visible; }
.auto { overflow-x: auto; }

.strip {
    display: flex;
    gap: 8px;
    padding: 8px;
    width: max-content;
}
.strip b {
    flex: 0 0 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4a6fa5;
    color: #fff;
    font: 16px sans-serif;
}
p { font: 14px sans-serif; margin: 0 0 6px; }

HTML

<p>Цей приклад показує як працює властивість <code>overflow-x</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити метод обобки переповнення контенту по горизонталі в блоці нижче.</p>

<div class="inputs">
  <input id="visible" checked name="overflow" type="radio"/>
  <label for="visible">visible</label>
  <message for="visible">Відображає ввесь вміст елемента, навіть вміст, що за межами елемента по ширині. Без задання.</message>
  
  <input id="hidden" name="overflow" type="radio"/>
  <label for="hidden">hidden</label>
  <message for="hidden">Відображається лише область всередині елемента, все, що поза межами контейнера буде обрізано.</message>
  
  <input id="scroll" name="overflow" type="radio"/>
  <label for="scroll">scroll</label>
  <message for="scroll">Смуги прокручування будуть завжди відображені.</message>
  
  <input id="auto" name="overflow" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Смуги прокручування з'являються, тільки при необхідності</message>
</div>

<div class="wm">
  <p id="message">Відображає ввесь вміст елемента, навіть вміст, що за межами елемента по ширині. Без задання.</p>
</div>

<hr>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#block {
  margin-top: 25px;
  line-height: 1.45;
  width: 400px;
  overflow-x: visible;
  background-color: gold;
  padding: 4px;
  white-space: nowrap;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('overflow-x', this.id));

}));

HTML

<div class="info">
	<p>За допомогою властивості <code>overflow-x</code> ми можемо вказати, що зробити для переповненого по горизонталі елемента на сторінці.</p>
	<p>Ви бачите два ідентичні блоки, але для них задані різні значення для обробки переповнення: <em>hidden</em> й <em>scroll</em> відповідно.</p>
</div>

<div class="wrapper">
	<div class="block one">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="block two">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 15px;
	line-height: 1.45;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

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

.block {
	width: 150px;
	background-color: gold;
	white-space: nowrap;
}

.block.one {
	overflow-x: hidden;
}

.block.two {
	overflow-x: scroll;
}

HTML

<div class="block block-1">
<p>Цепростодужедовгийтекстякийпростоє...</p>
</div>

<div class="block block-2">
  <p>Цепростодужедовгийтекстякийпростоє...</p>
</div>

<div class="block block-3">
  <p>Цепростодужедовгийтекстякийпростоє...</p>
</div>

<div class="block block-4">
  <p>Цепростодужедовгийтекстякийпростоє...</p>
</div>

CSS

.block {
  border: 2px dotted #666;
  padding: 12px;
  margin-bottom: 26px;
  width: 100px;
}

.block-1 {
  overflow-x: visible;
}

.block-2 {
  overflow-x: hidden;
}

.block-3 {
  overflow-x: scroll;
}

.block-4 {
  overflow-x: auto;
}