如何阻止元素 p 内的文本溢出视口？

【问题标题】：How do I stop text inside element p from overflowing the viewport?如何阻止元素 p 内的文本溢出视口？
【发布时间】：2016-09-13 21:23:10
【问题描述】：

我正在使用 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%;
}

【问题讨论】：

  • 能否用 jsFiddle 重现问题，以便我们帮助您理解？
  • Take a look at this link看看这个链接，说不定问题就解决了

标签： html css angularjs angular-ui-bootstrap web-developer-toolbar


【解决方案1】：

因为它在 job-view 类下，请在你的 css 上试试这个

.job-view { width : 100%; }
.job-view p { display : block; overflow-wrap: break-word; max-width : 100%;}

如果您还需要在您的列表中申请，那么还将以下代码添加到您的 css 中

 .job-view ul li {display : block; overflow-wrap: break-word; max-width : 100%;}

【讨论】：

  • 不工作，我以前尝试过所有这些。即使我在父元素上做了 width:100vw。
  • 这对访客来说有点困难，因为我们看不到实际代码和完整的 css，可能是一些覆盖条件的规则。试试上面的更新代码，我在 p 上添加了一个显示块并设置了一个最大宽度，如果我记得当 parent 设置为 flex 时有这样的错误
【解决方案2】：

将 width:100% 添加到 p 标签并使用 word-break:break-word 或 word-break-break-all

【讨论】：

  • 没有运气。
【解决方案3】： 
.job-view p{
white-space : pre;
}

试过上面的代码，效果很好。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-16
    • 2012-02-24
    • 1970-01-01
    • 2020-07-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode