Не работает overflow hidden

[Ubhra]

Добрый день.

В блоке article использую display:flex; и поочередно div и samp.

В итоге избыточный текст обрезается не корректно, последняя строка уходит за границы на половину. padding не помогает.

Скрытый текст

 

<article>
	<div style="font-size:140%;">Наименование 1</div>
	<samp>text</samp>
	<div class="test">LLLLLLLL LLLLL LLLLL LLL LLLLLLLLL LLLLLLLLLLLL LLLLLLLLLLLL LLLLLLLLLLLLLL LLLLLLLLLL LLLLLLLLLLLL LLL LLL LLLLLLLLL LLLLLLLL LLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLL LLLLLLLLLL LLLLLLL LLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLL LLLLLLLLLLLL LLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLL LLLLLLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLL LLLLLLLLLLLLLL LLLLLLLLLL LLLLLLLLLLLL LLL LLL LLLLLLLLL LLLLLLLL LL LLL LLLLLLLLLL LLLLLLLLLLLLL LLL LLL LLLLLLLLLLLLL LLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLL</div>
	<samp>text</samp>
</article>

article{
	background-color:#dcdcdc;
	margin:10px auto;
	box-sizing:border-box;
	border:1px solid #a9a9a9;
	border-radius:10px;
	box-shadow:0 0 5px #c0c0c0;
	max-height:280px;
	padding:10px;
	display:flex;
	flex-direction:column;
}
.test{
	background-color:orange;
	height:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:pre-wrap;
}

 

[Ubhra]

Завернул <samp> в <div>, заработало "обрезание", а вот многоточие не ставит.

Получается что то не то с <samp>?

samp{
	align-self:flex-end;
	margin:0;
	padding:0;
}

 

[AlexZaw]

Проверил ваш код в 4 браузерах, везде работает нормально, единственно что в IE не ставятся многоточия, но они там и не должны работать.

Так что что-то не то с вашим браузером

Edited March 10, 2018 by AlexZaw