html - 用css检测换行符

Question

我想用css检测换行符。我怎样才能做到这一点？可以用css吗？这样我就可以将不同的背景颜色设置为D. 我不知道元素的确切宽度，也不知道我会有多少。

我必须在行之间添加一些空间。如果有 3 行，我需要 1 / 2 和 2 / 3 之间的空间。

* {
  margin: 0;
  padding: 0:
}

.abc {
  width: 250px;
  border: 1px solid red;
}

.element {
  padding: 25px;
  border: 1px solid blue;
  display: inline-block;
}

<div class="abc">
  <div class="element">a</div>
  <div class="element">b</div>
  <div class="element">c</div>
  <div class="element">d</div>
  <div class="element">e</div>
</div>

标签： htmlcss

Answer 1

不确定这可以用 CSS 完成，但这里有一个简单的 javascript，它根据 div 的位置比较它们：

1. 我为所有元素定义了一个类，并添加了另一个名为“break”的类，它改变了下一行第一个元素的背景颜色。
2. 我把我的 div 放在 HTML 上
3. 我循环所有具有相同类的元素并通过getBoundingClientRect()它们的当前位置。此方法返回元素的大小及其相对于视口的位置。
4. 我将元素存储在我调用的变量中，并比较元素的current顶部位置（如果有）。currentpreviousprevious
5. 我创建一个previous元素作为current我将用来与以下元素进行比较的元素的克隆。

var elmnt =  document.getElementsByClassName('elmnt');
var previous=null;
    for (var i = 0; i < elmnt.length; i++) {
	var current=elmnt.item(i);
	var currentRect= current.getBoundingClientRect();
	if(previous!=null) {
	    var previousRect= previous.getBoundingClientRect();
	   
	    if(currentRect.top!=previousRect.top) {
	        current.classList.add("break");
		} 
	}
	var previous=current;
    }

.elmnt {
    display: inline-block;
    width:100px; 
    background-color: green; 
    height: 100px;
    border:1px solid #333;
}

.break {
    background-color: yellow!important;
}

<div id="container">
    <div class="elmnt">1</div>
    <div class="elmnt">2</div>
    <div class="elmnt">3</div>
    <div class="elmnt">4</div>
    <div class="elmnt">5</div>
    <div class="elmnt">6</div>
    <div class="elmnt">7</div>
    <div class="elmnt">8</div>
    <div class="elmnt">9</div>
</div>