带有按钮的文本行在右边对齐

Question

我有一个简单的元素，其中包含一个可变长度的文本，在行的右边有两个按钮。

这是标记：

<div class="row">
    <h1>Quem in fabulas et dolore, fore hic est elit 
laborum, nam malis consectetur sed si nisi despicationes.</h1>
    <div class="buttons">
        <button class="btn btn-default">My button</button>
        <button class="btn btn-default">Another btn</button>
    </div>
</div>

小提琴：http://jsfiddle.net/FBuZb/

它应该看起来像这个图像：

问题是，如果文字太长或窗口太薄我得到这个：

您可以看到按钮溢出文本。

我已经使用这个CSS来防止文本转到下一行：

.row h1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

但这并没有解决按钮的问题。 我无法知道.buttons元素的宽度，因为标签可以翻译成不同长度的不同语言。

我想我应该使用flex-box但是我没有练习它 如何在不使用javascript的情况下解决此问题？

注意：我不想为我的行设置固定宽度

Answer 1

button
{
float:right;
}


<p>
  <button class="btn btn-default">My button</button>
        <button class="btn btn-default">Another btn</button>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

试试这个例子

<div class="row">
         <button class="btn btn-default">My button</button>
        <button class="btn btn-default">Another btn</button>
       <h1>Quem in fabulas et dolore, fore hic est elit 
        laborum, nam malis consectetur sed si nisi despicationes.</h1>    
</div>

h1 {
            font-size: 20px;
            font-weight: 400;
            padding: 6px;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

button
{
float:right;
}

Answer 2

使用word-wrap

.row h1  {
   word-wrap:break-word;
} 

改变这个，

.buttons {
    position: relative;
    top: 0;
    right: 0;
    margin: 10px;
    float:right;
}

将div添加到h1 ans set css，

.text{
    width:70%;
}

请参阅demo