html - "Táco"比 "Taco"宽。我该如何解决？

我正在尝试在没有 div 的情况下加载带有变音符号的 div。虽然间距不像我那样工作。 (请参阅下面的片段。)我该如何解决这个问题？

div.text {
	    width: 75%;
	    position: relative;
	}
	div.diacritics {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
      z-index: -1;
      color: red;
	}

<div class="text">String String String String String String String String String String
	<div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
	<div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>

最佳答案

div.text {
    	    width: 75%;
    	    position: relative;
            font-family: monospace;
    	}
div.diacritics {
    	    width: 100%;
    	    height: 100%;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
            font-family: monospace;
          z-index: -1;
          color: red;
    	}    	

    <div class="text">String String String String String String String String String String
    	<div class="diacritics">
      Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
      </div>

    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
    	<div class="diacritics">
      Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
      </div>

如果您能够进行权衡，您可以随时尝试使用等宽字体系列。

关于html - "Táco"比 "Taco"宽。我该如何解决？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37450633/