Bootstrap 4 текста нажимает кнопки на новую строку

Question

У меня есть следующая HTML-страница, которая хорошо отображается на средних и больших устройствах, но у нее есть проблема с экранами меньшего размера.
Когда экран становится маленьким, текст внутри серых элементов («Раздражающий текст здесь» из примера ниже)) занимает все пространство, нажимая 2 плавающие вправо кнопки в новой строке, не поддерживая их на одной высоте.

Вот пример HTML:

    <div class="row mt-2">
      <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
        <p class="h3 text-primary">Annoying text here
        <button class="btn btn-md float-right ml-3 bg-primary">
         <i class="fas fa-cogs text-white"></i>
        </button>
        <button class="btn btn-md float-right bg-primary"> 
         <i class="fas fa-print text-white"></i>
        </button>
      </div>
     </div>

.Серый CSS-класс выглядит следующим образом:

 .gray{
    height: 70px;
    margin-top: 10px;
    padding-left: 20px;
    padding-top:20px;
    background-color:#eee;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    border-color: #337AB7;
}

Я стремился к тому, чтобы текст покрывался кнопками, не нажимая на них, или чтобы он стал свертываться
например, вместо "Раздражающий"Текст здесь "что-то вроде" Раздражает te ... "
Так, чтобы избежать проблемы в первую очередь.Я не уверен, что выразил себя, так что дайте мне знать, и я буду редактировать!Большое спасибо

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
     .gray{
        height: 70px;
        margin-top: 10px;
        padding-left: 20px;
        padding-top:20px;
        background-color:#eee;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: #337AB7;
     }
    </style>
    <div class="container">
    <div class="row mt-2">
      <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
        <p class="h3 text-primary">Annoying text here
        <button class="btn btn-md float-right ml-3 bg-primary">
         <i class="fas fa-cogs text-white">&times</i>
        </button>
        <button class="btn btn-md float-right bg-primary"> 
         <i class="fas fa-print text-white">&times</i>
        </button>
      </div>
     </div>    
    </div>

Answer 1

Пожалуйста, проверьте ниже код, он должен работать для вас

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
     .gray{
        height: 70px;
        margin-top: 10px;
        padding-left: 20px;
        padding-top:10px;
        background-color:#eee;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: #337AB7;
     }
	p.h3 {
		display: inline-block;
		width: 60%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		float: left;
		line-height: 1.4;
	}
	.float-right {
		float: right;
	}
</style>
<div class="container">
<div class="row mt-2">
  <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
	<p class="h3 text-primary">Annoying text here</p>
	<button class="btn btn-md float-right bg-primary" style="margin-left:10px;">
	 <i class="fas fa-cogs text-white">&times</i>
	</button>
	<button class="btn btn-md float-right bg-primary"> 
	 <i class="fas fa-print text-white">&times</i>
	</button>
  </div>
 </div>    
</div>