Sắp xếp theo chiều dọc văn bản và biểu tượng Hyphend

tôi có một <div> có chứa hai span. Một với một văn bản (dài hơn) và một với một biểu tượng. Văn bản sẽ được bọc (sử dụng dấu gạch ngang) và biểu tượng sẽ được căn chỉnh theo chiều dọc bên phải.Sắp xếp theo chiều dọc văn bản và biểu tượng 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>

Các html kết quả sẽ giống như

Donaudampfschiff- 
fahrtsgesellschafts (icon here) 
kapitän

Nguồn

2015-05-29 Christian Dietrich

Dưới đây là giải pháp:

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/

Nguồn

2015-05-29 11:25:54 LeoAref

Không làm việc - OP đòi hỏi từ lâu hơn để được chia bằng dấu gạch nối: http://jsfiddle.net/bupr4c2k/1/ – Paul

Unforunately này không làm việc trong trường hợp của chúng tôi vì sự khác biệt bên ngoài thực sự là một bảng. tôi cập nhật câu hỏi cho phù hợp –

@ChristianDietrich, bảng là vấn đề duy nhất trong giải pháp của tôi? – 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>

Nguồn

2015-05-29 11:43:11 Tachi

tôi thực sự muốn sử dụng dấu gạch nối tự động. điều này hoạt động miễn là nó không phải là một khối nội tuyến –

Vâng, nếu tôi đặt dấu gạch nối để tự động nó không tách các từ chính xác như bạn muốn, bạn có thể tự mình thử ví dụ ở trên. – Tachi

trong bài đăng đầu tiên của tôi, tôi đã bỏ qua thuộc tính lang. nếu bạn thêm vào thì nó hoạt động trong firefox. –

Sắp xếp theo chiều dọc văn bản và biểu tượng Hyphend

Trả lời

Các vấn đề liên quan