對齊單個詞在HTML/CSS

Question

我有我構建了這樣一個標題：

<header class="top"> 
    <a href=""> 
    <span class="right">Stichting Delftsche Opera Compagnie presenteert</span> 
    <h1 class="right">Carmen</h1> 
    <h2 class="right">Een opera door Krashna Musika en de TU Delft</h2> 
    </a> 
</header> 

這應該是這樣的，有人在Adobe Illustrator使這個

然後我申請了一些CSS並得到了這個（在原來有一個荷蘭語拼寫錯誤，這一個糾正，規模也不完全相等）：

規則：

.top { 
    display: block; 
    width: 800px; 
    float: right; 
} 

.top a { 
    background-image: url('../img/logo.jpg'); 
    background-size: 150px 150px; 
    background-repeat: no-repeat; 

    padding-left: 150px; 
    height: 175px; 

    display: block; 
    overflow: hidden; 
} 

.top .right { 
    text-align: justify; 
    width: 650px; 
} 

.top span, .top h2 { 
    color: #E02C33; 
    font-size: 1.8em; 
} 
.top h1 { 
    color: #B02025; 
    font-size: 4.7em; 
    text-transform: uppercase; 
} 

我這裏有兩個問題：

1. 我怎麼能證明這兩個<span>和<h2>其長度相等（我的理由是工作不正常）
2. 我該如何限制「CARMEN」這樣的寬度和高度是預定義的，字符之間的間距是由瀏覽器呈現的

Answer 1

證明問題是最後一行通常沒有正當性，因爲字母間距太長。

如果你可以使用CSS3，有新的屬性，使之成爲可能： http://www.css3.com/css-text-justify/

如果頭始終保持不變，你還可以調整字體大小和字母間距屬性，直到它適合。

Answer 2

一個重要的事情是，雖然最初在Adobe Photo Shop或Illustrator等中創建圖形是不同的，並且當我們在實際網頁中實現時，輸出在某些情況下可能會有所不同。所以我們必須寫這樣的CSS，以便我們可以完成所需的設計。謝謝。

看到搗鼓代碼和演示

小提琴：http://jsfiddle.net/ybf25/3/

演示：http://jsfiddle.net/ybf25/3/embedded/result/

注：由於我沒有玫瑰的圖像，所以我沒能創造如演示您提供的圖片有問題。

請參閱屏幕截圖輸出：請在新窗口中打開截圖以查看清晰的圖像。