Ich habe eine Statusleiste mit Chevron-Form, jede Leiste hat einen langen Text. auf der großen Leinwand sind alle perfekt. aber in kleinen Bildschirmtext brechen die Ausrichtung und Form. Ich musste nicht am mobilen Bildschirm arbeiten, aber es bricht auch in kleinen Laptop-Bildschirm.

Mein Zielergebnis wird unten angezeigt (mit kleinem Text funktioniert mein Code einwandfrei) Bildbeschreibung hier eingeben

Meine Schnipsel sind unten, bitte teilen Sie mir mit.

.chevron {
  display: inline-block;
  position: relative;
  clear: both;
  padding: 10px;
  height: 20px;
  width: 15%;
  text-align:center;
  color: white;
  font-size: 12px;
}

.chevron:before {
  top: 0;
  -webkit-transform: skew(55deg, 0deg);
  -moz-transform: skew(55deg, 0deg);
  -ms-transform: skew(55deg, 0deg);
  -o-transform: skew(55deg, 0deg);
  transform: skew(55deg, 0deg);
}
.chevron:after {
  top: 50%;
  -webkit-transform: skew(-55deg, 0deg);
  -moz-transform: skew(-55deg, 0deg);
  -ms-transform: skew(-55deg, 0deg);
  -o-transform: skew(-55deg, 0deg);
  transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
0
Anand Jose 17 Apr. 2018 im 20:53

5 Antworten

Beste Antwort

Einige Tipps, die Sie berücksichtigen sollten:

  • Sie können padding anpassen, um Text von Kanten fernzuhalten.

  • Flex kann auch nützlich sein, um Inhalte zu zentrieren.

  • Vertical-align kann für Inline-Boxen verwendet werden

.chevron {
/* flex to align content */
  display: inline-flex;
  align-items:center;
  justify-content:center;
  /* end flex update*/
  position: relative;
  clear: both;
  padding: 10px 0  10px 2.5em;/* adjust here side's padding*/
  margin:2px 0;/*vertical  margins if wrapping ? */
  height: 20px;
  width: 15%;
  vertical-align:middle;
  text-align:center;
  color: white;
  font-size: 12px;
}

.chevron:before {
  top: 0;
  -webkit-transform: skew(55deg, 0deg);
  -moz-transform: skew(55deg, 0deg);
  -ms-transform: skew(55deg, 0deg);
  -o-transform: skew(55deg, 0deg);
  transform: skew(55deg, 0deg);
}
.chevron:after {
  top: 50%;
  -webkit-transform: skew(-55deg, 0deg);
  -moz-transform: skew(-55deg, 0deg);
  -ms-transform: skew(-55deg, 0deg);
  -o-transform: skew(-55deg, 0deg);
  transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
1
G-Cyrillus 18 Apr. 2018 im 10:58
.content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
@media(max-width:768px) {
  .content {
    flex-flow: wrap;
  }
}
.chevron {
  width: 100%;
  position: relative;
  padding: 10px;
  height: 20px;
  line-height: 20px;
  text-align:center;
  color: white;
  font-size: 12px;
  white-space: pre-wrap;
}

.chevron:before {
  top: 0;
  -webkit-transform: skew(55deg, 0deg);
  -moz-transform: skew(55deg, 0deg);
  -ms-transform: skew(55deg, 0deg);
  -o-transform: skew(55deg, 0deg);
  transform: skew(55deg, 0deg);
}
.chevron:after {
  top: 50%;
  -webkit-transform: skew(-55deg, 0deg);
  -moz-transform: skew(-55deg, 0deg);
  -ms-transform: skew(-55deg, 0deg);
  -o-transform: skew(-55deg, 0deg);
  transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #609090;
}
<div class="content">
  <div class="chevron">Claim registered</div>
  <div class="chevron">Awaiting Emails </div>
  <div class="chevron">Please Repair; Awaiting repair date</div>
  <div class="chevron">some lengthiest; status goes</div>
  <div class="chevron">Invoice Paid</div>
</div>

Ich hoffe es ist was du suchst :)

1
Carlos vm 17 Apr. 2018 im 18:37

Was ist, wenn Sie die Elemente ausrichten und im Falle der Reaktion zentrieren und nur eines pro Zeile belassen?

  .chevron {
    display: inline-block;
    position: relative;
    clear: both;
    padding: 12px 0 8px 27px;
    height: 20px;
    width: 15%;
    text-align:center;
    color: white;
    font-size: 12px;
    vertical-align: top;
    line-height: 9px;
  }
  
  .chevron:before {
    top: 0;
    -webkit-transform: skew(40deg, 0deg);
    -moz-transform: skew(40deg, 0deg);
    -ms-transform: skew(40deg, 0deg);
    -o-transform: skew(40deg, 0deg);
    transform: skew(40deg, 0deg);
    border-top-left-radius: 3px;
  }
  .chevron:after {
    top: 50%;
    -webkit-transform: skew(-40deg, 0deg);
    -moz-transform: skew(-40deg, 0deg);
    -ms-transform: skew(-40deg, 0deg);
    -o-transform: skew(-40deg, 0deg);
    transform: skew(-40deg, 0deg);
    border-bottom-left-radius: 3px;
  }
  .chevron:after, .chevron:before {
    content: '';
    position: absolute;
    left: 15px;
    z-index:-1;
    height: 50%;
    width: 100%;
    background: #609090;
  }
@media all and (max-width:768px){
  .chevron {display: block;margin: 5px auto;padding: 8px 9px 12px 30px;}
}
 
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
1
Hugo Stiven Laguna Rueda 17 Apr. 2018 im 22:36
.content {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
}
@media(max-width:768px) {
  .content {
    flex-flow: wrap;
  }
  .chevron {
    text-align:end;
  }
}
.chevron {
  width: 100%;
  position: relative;
  padding: 10px;
  min-height: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
  margin: 5px 2px;
}
.chevron span {
  width: 100%;
  margin-left: 25px;
  color: white;
  text-align: center;
  font-size: 12px;
  white-space: pre-wrap;
  text-transform: capitalize;
}
.chevron:before {
  top: 0;
  -webkit-transform: skew(55deg, 0deg);
  -moz-transform: skew(55deg, 0deg);
  -ms-transform: skew(55deg, 0deg);
  -o-transform: skew(55deg, 0deg);
  transform: skew(55deg, 0deg);
}
.chevron:after {
  top: 50%;
  -webkit-transform: skew(-55deg, 0deg);
  -moz-transform: skew(-55deg, 0deg);
  -ms-transform: skew(-55deg, 0deg);
  -o-transform: skew(-55deg, 0deg);
  transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
  content: '';
  position: absolute;
  left: 15px;
  z-index:-1;
  height: 50%;
  width: 100%;
  background: #609090;
}
<div class="content">
  <div class="chevron"><span>Claim registered</span></div>
  <div class="chevron"><span>Awaiting Emails</span> </div>
  <div class="chevron"><span>Please Repair; Awaiting repair date </span></div>
  <div class="chevron"><span>some lengthiest; status goes</span></div>
  <div class="chevron"><span>Invoice Paid</span></div>
</div>

Ok Freund hier ist das!

1
Carlos vm 17 Apr. 2018 im 23:27

Ja, die Stile reagieren nicht, eine feste Höhe und Breite. Verwenden Sie auch die Zeilenumbruch-Eigenschaft, um das Wort aus dem überlappenden Inhaltsbereich zu entfernen (funktioniert nicht gut, wenn die Höhe festgelegt ist).

Siehe ein Beispiel:

.chevron {
  display: inline-block;
  position: relative;
  clear: both;
  padding: 10px;

 /* You can change this to fit the height you want */
  height: auto;

  width: 15%;
  text-align:center;
  color: white;
  font-size: 12px;
  word-wrap: break-word;
}

/* Responsive media query */
@media screen and ( min-width: 992px )
{
    .chevron {
        max-height: 20px;
    }
}
0
John Zenith 17 Apr. 2018 im 18:22