Uzasadniające pojedynczą linię przełamuje linię przed ostatnim słowem w IE, gdy ostatnie słowo następuje myślnik

głosy
1

Mam następujący kod:

.clJustify {
  width: 400px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
  text-align: justify;
}
.clJustify:after {
  content: ;
  display: inline-block;
  width: 100%;
}
<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>Justify Test</title>
</head>

<body>
  <p class=clJustify>This is text that should be jus-</p>
  <p class=clJustify>tified and also hyphenated.</p>
</body>

</html>

Proszę nie pytaj mnie, dlaczego chcesz to zrobić. :-)

Mój problem jest: w FF i Chrome powoduje to dwie linie tekstu, które wypełniają przestrzeń <p>. Ale IE zrywa pierwszy wiersz przed „jus-” i umieszcza je w osobnej linii. Linia bez myślnika będą wyświetlane zgodnie z oczekiwaniami, to łącznik na końcu, że myli IE wydaje.

Oto zrzut ekranu z programu Internet Explorer:

Zrzut

I tu jest zrzut ekranu z Firefox:

Zrzut

Wszelkie pomysły, w jaki sposób można zapobiec IE z zerwania linii? Sugerowane odpowiedzi do starszych postów nie rozwiązuje problemu z myślnikiem .

Utwórz 24/10/2015 o 15:40
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

Spróbuj text-align-lasti -ms-text-align-lastto działa w IE:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Justify Test</title>
    <style type="text/css">
      .clJustify{
        width: 400px;
        height: 1.5em;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        text-align: justify;
        -ms-text-align-last: justify;
        text-align-last: justify;
      }
      .clJustify:after{
        content: " ";
        display: inline-block;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <p class="clJustify">This is text that should be jus-<br>&nbsp;</p>
    <p class="clJustify">tified and also hyphenated.</p>
  </body>
</html>

Odpowiedział 24/10/2015 o 15:51
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more