текст модального тела вытекает - перенос слов не работает - PullRequest
Новая
       11

текст модального тела вытекает - перенос слов не работает

1 голос
/ 07 июня 2019

enter image description here Я создал всплывающее окно modal и отображаю текст из базы данных.Так как часть текста очень длинная и выходит из окна modal.

я использую тег <pre ng-bind-html="history.comment" class="wrap-word">, но все равно он переполнен.

Пожалуйста, найдите мойHTML-код ниже. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	  <h2>Modal Example</h2>
	  <!-- Trigger the modal with a button -->
	  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
	  <!-- Modal -->
	  <div class="modal fade" id="myModal" role="dialog">
		<div class="modal-dialog">
		
		  <!-- Modal content-->
		  <div class="modal-content">
			<div class="modal-header">
			  <button type="button" class="close" data-dismiss="modal">&times;</button>
			  <h4 class="modal-title">Modal Header</h4>
			</div>
			<div class="modal-body">
	  <div class="form-group row">
		<div>
		  <table class="table">
			<tr >
			  <td >
				<div class="row">
				  <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
					<label>Action:</label>
				  </div>
				  <div id="action" class="col-lg-10">Approved</div>
				</div>
				<div class="row">
				  <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
					<label>User:</label>
				  </div>
				  <div id="Name" class="col-lg-10">Karthikeyan</div>
				</div>
				<div class="row">
				  <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
					<label>Comment</label>
				  </div>
				  <div id="comment" class="col-lg-10">
					 <div id="Name" class="col-lg-10">Karthikeyanaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
				  </div>
				</div>
			  </td>
			</tr>
		  </table>
		</div>
	  </div>
			<div class="modal-footer">
			  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		  </div>
		  
		</div>
	  </div>
	  
	</div>

Пожалуйста, найдите прикрепленный скриншот также.

Пожалуйста, найдите скриншот обновления с дополнительной информацией о теге <pre>.enter image description here

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Попробуйте это, есть самая распространенная проблема переполнения, назначьте статический класс вашему тексту для выполнения задачи над ним 

.modal-body #historyComment_0 {
    word-wrap: break-word;
}
0 голосов
/ 07 июня 2019

Ваш макет сетки не распознан, потому что вы используете table , попробуйте добавить этот код вверху тега таблицы. 

<div class='table table-responsive'>
     <table class="table">
     </table>
</div>

или попробуйте добавить этот CSS в раздел комментариев 

style="word-wrap: break-word;"
...