Wyrównanie w pionie tekstu i wiadomości Hyphend

Mam jeden znak <div> zawierający dwa span. Jeden z (dłuższym) tekstem i jeden z ikoną. Tekst powinien się zawijać (za pomocą łączników), a ikona powinna być ustawiona pionowo w prawo do niego.Wyrównanie w pionie tekstu i wiadomości Hyphend

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/> 
    <style> 

    tr > th > span.text { 
     webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; 
    } 

    tr > th > span.icon { 
     float: right; vertical-align: middle; 
    } 
    </style> 
</head> 
<body> 
    <table width="200px" style="table-layout:fixed"> 
     <tr> 
      <th> 
       <span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span> 
       <span class="icon"> 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
       </span> 
      </th> 
      <th> 
       <span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span> 
       <span class="icon"> 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
       </span> 
      </th> 
     <tr> 
    </table> 
</body> 
</html>

Powstały html powinien wyglądać

Donaudampfschiff- 
fahrtsgesellschafts (icon here) 
kapitän

Źródło

2015-05-29 Christian Dietrich

Oto rozwiązanie:

HTML

<div class="container"> 
    <span class="text">Very very very very very long text.......</span> 
    <span class="icon"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt=""></span> 
</div>

CSS

.container { 
    display: table; 
} 

.container .text { 
    display: inline-block; 
    max-width: 100px; 
} 

.container .icon { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 15px; 
}

JSFiddle: http://jsfiddle.net/LeoAref/4L126nps/

Źródło

2015-05-29 11:25:54 LeoAref

nie działa - OP wymaga dłuższych słów, aby być złamane za pomocą łączników: http://jsfiddle.net/bupr4c2k/1/ – Paul

unforunately nie robi działa w naszym przypadku, ponieważ zewnętrzna różnica jest w rzeczywistości tabelą. I odpowiednio zaktualizować pytanie –

@ ChristianaDietrich, tabela jest jedynym problemem w moim rozwiązaniem? – LeoAref

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/> 
 
    <style> 
 

 
    .text { 
 
     webkit-hyphens: manual; 
 
\t \t -moz-hyphens: manual; 
 
\t \t -ms-hyphens: manual; 
 
\t \t -o-hyphens: manual; 
 
\t \t hyphens: manual; 
 
    } 
 
\t .icon { 
 
\t \t position:absolute; 
 
\t \t margin-left: 50px; 
 
\t \t top: 25px; 
 
\t } 
 
\t .my-text{ 
 
\t \t -webkit-hyphens: manual ; 
 
\t \t -moz-hyphens: manual ; 
 
\t \t -ms-hyphens: manual ; 
 
\t \t -o-hyphens: manual ; 
 
\t \t hyphens: manual ; 
 
\t } 
 
    </style> 
 
</head> 
 
<body> 
 
    <table style="width: 100px;"> 
 
     <tr> 
 
      <th> 
 
       <span class="text" lang="de">Donaudampfschiff&shy;fahrtsgesellschafts&shy;kapitän</span> 
 
       <span class="icon"> 
 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
 
       </span> 
 
      </th> 
 
     <tr> 
 
    </table> 
 
\t 
 
\t <div style="width:170px;"> 
 
    \t <span class="my-text">Donaudampfschiff&shy;fahrtsgesellschafts<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">&shy;kapitän</span> 
 
\t </div> 
 
</body> 
 
</html>

Źródło

2015-05-29 11:43:11 Tachi

rzeczywiście chcę używać auto-łączników. działa tak długo, jak nie jest to blok inline –

Cóż, jeśli wstawię łączniki do auto, to nie oddziela słów poprawnie, jak chcesz, możesz spróbować samemu w powyższym przykładzie. – Tachi

w moim pierwszym poście brakowało mi atrybutu języka. jeśli dodasz to działa w firefox. –

Wyrównanie w pionie tekstu i wiadomości Hyphend

Odpowiedz

Powiązane problemy