span Zeilenumbruch

[Hannes Weninger]

Hallo,

ich habe folgenden AngularJS HTML- Code unten, die spans sind in einer Tabelle. Durch die spans bekomme ich einen Zeilenumbruch, wenn ich z.B. "<span ng-switch-when='CHARTVIEW'>" weggebe, dann passt sich der span genau der Zeilen- Höhe an. Hier ist noch das css:

.scheduleTable .timerange {
  display: inline-block;
  font-size: .86em; 
  color: white; 
  font-weight: bold; 
  padding: .5em .2em .6em .2em; 
  margin: .1em;
  cursor: help;
}

In Chrome wird übrigens kein Zeilenumbruch gemacht. Was kann ich machen, damit der Zeilenumbruch in Firefox nicht gemacht wird.

Danke! Hannes

<span ng-switch-default ng-switch="vm.viewType">
   <span ng-switch-when='TABLEVIEW'>
	{{ vm.split(relevantObject.start, ' ', 1) }}-{{ vm.split(relevantObject.end, ' ', 1) }}
    </span>
    <span ng-switch-when='CHARTVIEW'>
        default
     </span>
<span ng-switch-default></span>
</span>

[Tabellenkalk]

Hallo,

Durch die spans bekomme ich einen Zeilenumbruch, wenn ich z.B. "<span ng-switch-when='CHARTVIEW'>" weggebe, dann passt sich der span genau der Zeilen- Höhe an.

was meinst du mit "weggeben"?

Was kann ich machen, damit der Zeilenumbruch in Firefox nicht gemacht wird.

Wird da vielleicht ein Zeilenumbruch aus dem Code weitergegeben? Manchmal hilfts, den Code-Zeilenumbruch innerhalb des tags zu notieren.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Wird da vielleicht ein Zeilenumbruch aus dem Code weitergegeben?

Zeilenumbruch im HTML-Code wird als Leerzeichen dargestellt (sofern nicht mit CSS anderes gesagt wird, was bei pre per Browserstylesheet auch der Fall ist).

Manchmal hilfts, den Code-Zeilenumbruch innerhalb des tags zu notieren.

Gegen Leerzeichen, die sich als Zwischenräume zwischen inline-block-Elementen störend bemerkbar machen. Und es ist nicht die beste Strategie, wegen der gewünschten Darstellung den Code derart zu verunstalten. Dank Flexbox sollte das auch nicht mehr notwendig sein.

Keine Ahnung, was der OP für Zeilenumbrüche haben will. Vermutlich keine, sondern block-Elemente (oder inline-block?). Aus dem gezeigten Code geht das nicht hervor.

LLAP 🖖

[Gunnar Bittersmann]

@@Hannes Weninger

Hier ist noch das css: .scheduleTable .timerange {

Der Selektor passt auf keins der in deinem Markup-Schnipsel gezeigten Elemente.

Aus deinem gezeigten Code ist das Problem nicht erkennbar.

LLAP 🖖