Как обернуть текст вокруг объекта, но обрезать каждую строку - PullRequest
Новая
       23

Как обернуть текст вокруг объекта, но обрезать каждую строку

0 голосов
/ 21 апреля 2020

Можно обрезать текст каждой строки , но все равно показывать значки, например, строку nr. 4 выглядит следующим образом (4. Lorem ipsum dolor sit amet, adetetur sadipscing elitr ...)?

Если нет, то как мне обрезать каждую строку текста? 

div {
	border: 1px dotted gray;
}
.label {
	width: 120mm;
	height: 62mm;
}
.qrcode {
	width:72px;
	height: 72px;
	display: block;
	float: left;
}
.line {
	width: 100%;
}
.icon {
	display: inline-block;
}
.truncated {
	/* overflow: hidden;
	text-overflow: clip;
	white-space: pre-line; */
}
<div class="label">
	<img class="qrcode" src="{{...}}"/>
	<div class="line truncated">1. Lorem ipsum: dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</div>

	<div class="line">
		<span class="text truncated">2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</span>
		<img class="icon" src="{{ ... }}"/>
		<img class="icon" src="{{ ... }}"/> 
	</div>

	<div class="line">    	
		<span class="text truncated">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</span>
		<img class="icon" src="{{ ... }}"/> 
		<img class="icon" src="{{ ... }}"/>
		<img class="icon" src="{{ ... }}"/>
	</div>

	<div class="line">
		<span class="text truncated">4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</span>
		<span class="icons"><img class="icon" src="{{ ... }}"/> 
		<img class="icon" src="{{ ... }}"/></span>
	</div>

	<div class="line">
		5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
		<img class="icon" src="{{ ... }}"/> 
		<img class="icon" src="{{ ... }}"/>
	</div>
</div>
...