Невозможно установить текстовое поле на вкладке, используя CSS, и некоторые текстовые значения не отображаются

Question

Я хочу установить текст в одной строке на вкладке вместо разрыва, и автоматически размер вкладки должен быть увеличен. Может кто-нибудь помочь мне вписать текст внутри вкладки в одну строку?

body {
  margin-top: 25px;
}

#results1 {
  margin-left: 350px;
}

#breadcrumbNav1 {
  margin-top: 0px;
  margin-left: 143px;
}

#arrowBar1 {
  display: inline-block;
  /*background-color: red; */
  width: 557px;
  height: 52px;
  overflow: hidden;
}

#borderTop1 {
  display: block;
  position: relative;
  width: 530px;
  height: 1px;
  background-color: #000000;
  z-index: 100;
}

#borderBottom1 {
  display: block;
  position: relative;
  width: 531px;
  height: 1px;
  background-color: #000000;
  z-index: 100;
  top: -152px;
}

.AB1rotate {
  position: relative;
  display: inline-block;
  top: -76px;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.AB1rotateReset {
  display: inline-block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

a {
  color: white;
}

.color0arrowTail {
  z-index: 60;
  background-color: white;
  border: 1px solid black;
  margin-left: -217px;
}

.color1 {
  z-index: 50;
  background-color: DodgerBlue;
  border: 1px solid black;
  margin-left: -100px;
}

.color2 {
  z-index: 40;
  background-color: purple;
  border: 1px solid black;
  margin-left: -100px;
}

.color3 {
  z-index: 30;
  background-color: DarkGreen;
  border: 1px solid black;
  margin-left: -100px;
}

.color4 {
  z-index: 20;
  background-color: brown;
  border: 1px solid black;
  margin-left: -100px;
}

.color5 {
  z-index: 10;
  background-color: orange;
  border: 1px solid black;
  margin-left: -100px;
}

.AB1text1 {
  position: absolute;
  top: 120px;
  left: 72px;
}

.AB1text2 {
  position: absolute;
  top: 120px;
  left: 57px;
}

.AB1text3 {
  position: absolute;
  top: 120px;
  left: 72px;
}

.AB1text4 {
  position: absolute;
  top: 119px;
  left: 60px;
}

.AB1text5 {
  position: absolute;
  top: 119px;
  left: 70px;
}

#arrowBar1 a .AB1rotate:hover {
  background-color: lime;
  color: black;
}

#results2 {
  margin-left: 350px;
}

#breadcrumbNav2 {
  margin-top: 0px;
  margin-left: 45px;
}

#arrowBar2 {
  display: inline-block;
  overflow: hidden;
  width: 732px;
  height: 50px;
  border: 1px solid #000000;
}

.color0 {
  z-index: 60;
  background-color: grey;
  border: 1px solid black;
  margin-left: -120px;
}

.color6 {
  background-color: teal;
  margin-left: -100px;
}

.AB2rotate {
  position: relative;
  display: inline-block;
  top: -75px;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.AB2rotateReset {
  display: inline-block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.AB2text0 {
  position: absolute;
  top: 119px;
  left: 60px;
}

.AB2text1 {
  position: absolute;
  top: 119px;
  left: 70px;
}

.AB2text2 {
  position: absolute;
  top: 119px;
  left: 58px;
}

.AB2text3 {
  position: absolute;
  top: 119px;
  left: 57px;
}

.AB2text4 {
  position: absolute;
  top: 119px;
  left: 60px;
}

.AB2text5 {
  position: absolute;
  top: 119px;
  left: 80px;
}

.AB2text6 {
  position: absolute;
  top: 119px;
  left: 70px;
}

#arrowBar2 a .AB2rotate:hover {
  background-color: #ffff00;
  color: black;
}

<div id="breadcrumbNav2">
  <div id="arrowBar2">
    <!-- Notice the lack of #borderTop2 and #borderBottom2 in this example since border is applied entirely to #arrowBar2 instead. -->
    <!-- The very first crumb has a different "foo" style since this crumb has no arrow tail -->
    <a href="#Amazon Payments Test Suite"> <span class="AB2rotate color0"><span class="AB2rotateReset"><span class="AB2text0">Amazon Payments Test Suite</span></span>
      </span>
    </a>
    <a href="#Google Payment Test suite"> <span class="AB2rotate color1"><span class="AB2rotateReset"><span class="AB2text1">Google Payment Test suite</span></span>
      </span>
    </a>
    <a href="#Paypal Payment GateWay Experience"> <span class="AB2rotate color2"><span class="AB2rotateReset"><span class="AB2text2">Paypal Payment GateWay Experience</span></span>
      </span>
    </a>
  </div>
</div>

JSFiddle: https://jsfiddle.net/wy54Lem3/2/

Обновления:

Добавлено "пробел: сейчас" ниже css:

.AB2text0{                  /* Wonderful */
    position: absolute;
    top: 119px;
    left: 60px;
    white-space: nowrap;
}

Изображение:

Размер вкладки не увеличивается.

Обновлено 2:

Добавлен "Amazon Payments Test Suite", но все равно он выглядит как на картинке выше. Вкладка не может быть увеличена, и текст переопределяется в другой вкладке.