模态正文文本流出-自动换行不起作用

Question

我创建了modal弹出屏幕，并显示数据库中的一些文本。因为其中一些文本很长，并且超出了modal屏幕窗口。

am使用<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>标签的更多信息的更新屏幕截图。

Answer 1

无法识别您的网格布局，因为您使用表尝试将此代码添加到表标签的顶部。

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

或尝试将此CSS添加到您的评论部分

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

Answer 2

尝试这个问题，这是最常见的溢出问题，为文本提供静态类以对其执行任务

.modal-body #historyComment_0 {
    word-wrap: break-word;
}

Answer 3

使用下面的代码可以解决此问题

style={{ whiteSpace: 'unset' }}