我正在使用 angular uib-accordion 来显示从 angularJS 中的 JSON 解析的详细信息。
然而，在造型之后，我注意到段落文本在小分辨率下溢出了视口。
溢出是由 <p>{{position.shortDescription}}</p>
HTML
<div class="row" ng-show="showMeDetails">
<uib-accordion close-others="oneAtATime">
<div class="row" ng-repeat="position in departments.positions">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group>
<uib-accordion-heading>
<div class="col-sm-10">
<div class="job-view">
<h4>{{position.name}}</h4>
<p>{{position.shortDescription}}</p>
</div>
</div>
<div class="col-sm-2">
<div class="apply-btn">
<button ng-click="applyAction($event,position.name)" class="btn btn-info" type="button">APPLY</button>
</div>
</div>
</uib-accordion-heading>
<div class="position-full-description"></div>
<div class="position-full-description" ng-repeat="description in position.fullDescription">
<h4>{{description.headline}}</h4>
<ul ng-if="description.type == 'list'" class="detailed_lines">
<li ng-repeat="line in description.lines">{{line}}</li>
</ul>
<p ng-if="description.type == 'paragraph'" ng-repeat="line in description.lines">{{line}}</p>
</div>
</uib-accordion-group>
</uib-accordion>
</div>
</uib-accordion>
</div>
CSS
.job-view {
display: flex;
-webkit-display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: space-between;
align-content: space-between;
padding-left: 50px;
text-align: left;
}
完整的 CSS
.navbar-nav {
float: right;
}
.container-fluid .nav > li > a {
color: #333a3f;
font-weight: 700;
font-size: 16px;
}
.container-fluid .nav > li > a:focus, .nav > li:active > a {
background: -webkit-linear-gradient(top,rgba(0,179,255,0) 0%,rgba(0,179,255,0) 75%,#00b3ff 75%,#00b3ff 80%,rgba(0,179,255,0) 80%,rgba(0,179,255,0) 100%);
background: -o-linear-gradient(top,rgba(0,179,255,0) 0%,rgba(0,179,255,0) 75%,#00b3ff 75%,#00b3ff 78%,rgba(0,179,255,0) 78%,rgba(0,179,255,0) 100%);
background: -moz-linear-gradient(top,rgba(0,179,255,0) 0%,rgba(0,179,255,0) 75%,#00b3ff 75%,#00b3ff 78%,rgba(0,179,255,0) 78%,rgba(0,179,255,0) 100%);
background: -ms-linear-gradient(top,rgba(0,179,255,0) 0%,rgba(0,179,255,0) 75%,#00b3ff 75%,#00b3ff 78%,rgba(0,179,255,0) 78%,rgba(0,179,255,0) 100%);
background: linear-gradient(top,rgba(0,179,255,0) 0%,rgba(0,179,255,0) 75%,#00b3ff 75%,#00b3ff 78%,rgba(0,179,255,0) 78%,rgba(0,179,255,0) 100%);
}
.nav > li > a:hover {
background: none;
}
.btn-info {
border-radius: initial;
background-color: #32b5e5;
padding: 5px 30px;
border: none;
font-size: 14px;
font-weight: 400px;
font-color: #fff;
}
.btn-info:disabled {
background-color: #5b9ec0;
}
.btn-info:active {
background-color: #32b5e5;
}
.panel-heading {
background-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
}
.panel, .panel-group .panel-heading+.panel-collapse>.panel-body {
border: none;
}
.jobs-space {
display: flex;
flex-direction: row;
overflow-y: hidden;
overflow-x: auto;
}
.job-view {
display: flex;
-webkit-display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: space-between;
align-content: space-between;
padding-left: 50px;
text-align: left;
}
.job-description {
display: block;
}
.custom-content-tabs[vertical="false"] > ul.nav {
padding-bottom: 1%;
padding-top: 1%;
}
.position-full-description {
margin-top: 50px;
display: flex;
-webkit-display: flex;
flex-direction: column;
-webkit-flex-direction: column;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
text-align: left;
}
.position-full-description > .ng-binding {
display: inline-flex;
-webkit-display: flex;
-webkit-flex-direction: column;
flex-direction: column;
padding-left: 50px;
}
h4.ng-binding:before {
white-space: pre;
display: inline-block;
text-align: left;
}
.detailed_lines {
padding-left: 100px;
}
h5 {
text-align: center;
}
.position-full-description > .ng-binding {
font-style: italic;
}
p.ng-binding {
font-size: 16px;
color: black;
font-weight: 500;
}
@media only screen and (max-width:1000px) {
h4.ng-binding {
white-space: pre;
display: inline-block;
text-align: left;
color: black;
}
}
.container-fluid .nav > li > a {
padding: 20px;
}
.carousel-row {
height: 60px;
overflow-x: scroll;
}
.carousel-dept {
padding: 10vw;
overflow-x: scroll;
}
input[type=text], input[type=email], input[type=text], textarea[type=text] {
border: none;
border-radius: 0;
border-bottom: 1px solid grey;
border-top: none;
border-left: none;
border-right: none;
box-shadow: none;
margin-bottom: 20px;
}
.btn-info {
border-radius: initial;
background-color: #32b5e5;
padding: 5px 30px;
border: none;
}
.btn-info:disabled {
background-color: #5b9ec0;
}
.btn-info:active {
background-color: #32b5e5;
}
.upload {
text-align: left;
margin-left: 15px;
}
input[type=text] {
-moz-appearance: textfield;
}
#unified-inputs.input-group {
width: 100%;
}
#unified-inputs.input-group input:last-of-type {
border-left: 0;
}
.btn-submit {
float: right;
margin-right: 40px;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
border-color: rgba(0,0,0,0.8);
box-shadow: 0 1px 1px rgba(255,255,255,0.075) inset,0 0 8px rgba(255,255,255,0.6);
outline: 0 none;
}
.contact-form {
margin-right: 1vw;
}
.add-icon {
position: absolute;
left: 95%;
}
.sub-form {
display: inline-block;
left: 10%;
}