适配缩小屏幕的面板，当面板里面有单词时带有'pre' html标签

Question

我的 angularJS 应用程序存在此类问题。当我减少浏览器的 window 时，相应地我减少了一个面板，里面有一个很长的单词（比如 20 个字符），我有带有 'pre' html 标签的代码来不破坏线。在某些时候，面板中的单词 'escape' 和效果非常非常难看。有没有办法 'to notify' 到面板，我的词不能开始一个新行并避免这个词从面板中逃脱？先感谢您。

那是我的代码

    <div class="panel-body" uib-collapse="isCollapsedHeader">
            <div class="row">
                <label class="col-lg-2 label-margin"> Data riferimento </label>
                <div class="col-lg-1 right-col-margin">{{fondo.dataRif}}</div>
                <label class="col-lg-2 label-margin"> Chiave IB </label>
                <div class="col-lg-7 i9fontPre right-col-margin">{{fondo.chiave}}</div>
            </div>
</div>

和我的 css

.i9fontPre {
    white-space:pre; 
    font-size: 14px;
    font-family:"Times New Roman", Georgia, Serif;
}

.row label.label-margin { 
    margin: 0px 0px 1px 0px !important;
}

.row  .right-col-margin{ 
    margin: 0px 0px 8px 0px !important;
}

Answer 1

请尝试 html5 wbr 标签来打断长字。

示例：

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery**<wbr>**longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

请查看下方 link 以获取解决方案

https://jsfiddle.net/1pwmnq3L/

Answer 2

你可以用word-wrap: break-word;来分解。这是一个工作示例：

#box {
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 2px solid blue;
  border-radius: 4px;
  word-wrap: break-word; 
}

<div id="box">
  <pre>
    Reeeeeaaaaaaaaaaaaaalllyyyylongword
  </pre>
</div>

您可以将 word-wrap 应用于 <pre> 或其容器元素。

Answer 3

根据我对 css3 省略号属性隐藏文本的问题的评论。请查看下方 link.

div{ width:120px; overflow:hidden; text-overflow:ellipsis;}

<div>
  logggggggggggggggggggggggggggggworddddddddddddddd
</div>

适配缩小屏幕的面板，当面板里面有单词时带有'pre' html标签

Adapt the panel reducing the screen, when inside panel there is a word with 'pre' html tag

html

angularjs

angular-ui-bootstrap