對齊通過CSS旋轉的文本時遇到問題

我目前正在修改Chris Callison-Burch的亞馬遜機械土耳其語字對齊用戶界面（https://github.com/callison-burch/mechanical_turk_workshop/wiki/word-alignment或http://cs.jhu.edu/~ccb/interface-word-alignment.html），以便它不會將圖像用於旋轉的源單詞。我已經成功旋轉了源代碼（英文），但我無法正確對齊它們。我希望文字環繞桌面，所以頂部的英文單詞應該與桌面頂部對齊，底部的英文單詞應該與桌子底部對齊。基本上，我希望它看起來像這個頁面（http://cs.jhu.edu/~ccb/interface-word-alignment.html），但旋轉的文本，而不是旋轉的圖像。具體http://jsfiddle.net/BqTJe/對齊通過CSS旋轉的文本時遇到問題

，我使用了下面的CSS類旋轉的話：

你可以在這裏檢查代碼

.rotated { 
    display: block; 
    position: relative; 
    width: 20px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
}

感謝您的幫助提前！

來源

2013-02-16 yukw777

根據你的解釋，我不太確定你打算得到的最終結果是什麼。也許提交一個代表你最終目標的圖像？ – jedmao 2013-02-16 23:39:51

我希望它看起來像這樣：[鏈接]（http://cs.jhu.edu/~ccb/interface-word-alignment.html），但使用純文本而不是使用圖像。 – yukw777 2013-02-17 03:29:07

如果您在旋轉的塊周圍放置邊框，您將看到旋轉會從文檔流中移除文本 - 該框不會垂直擴展以包含與灰色區域重疊的文本。您必須調整線路的高度才能容納「最高」線路。 – 2013-02-17 05:35:48

我問上www.reddit.com/r/css這個問題，這是我得到了什麼（感謝www.reddit.com/u/dangoodspeed！）

首先，你下面的行添加到CSS ：

table { border-collapse:collapse; margin:100px auto;} 
td { border:2px solid white; min-width:20px; min-height:20px;} 
table tr:last-child td { overflow:hidden; height:100px; max-width:20px;} 
table tr:last-child td div { display:block; text-align:right; width:100px; height:20px; positon:relative; left:-40px;}

然後你用div而不是span來覆蓋表格底部的文本。

這裏你可以看到固定的版本：http://jsfiddle.net/BqTJe/12/

注：話不能長於100像素。

來源

2013-02-17 15:15:25 yukw777

對齊通過CSS旋轉的文本時遇到問題​​

回答

相關問題

對齊通過CSS旋轉的文本時遇到問題