调整面板缩小屏幕，当面板内部有一个带有 html 标签'pre'单词时

Question

我的angularJS应用程序有这种问题。当我缩小浏览器的窗口时，相应地我减少了一个内部带有很长单词(如 20 个字符(的面板，我有带有"pre"html 标签的代码，以免换行。在某些时候，"逃脱"这个词从面板上消失了，效果非常非常丑陋。有没有办法"通知"面板，我的单词不得开始新行并避免单词从面板中转义？提前谢谢你。

那是我的代码

    <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

您可以使用

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 2

请尝试 html5 wbr 标签来换长单词。

例：

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

请查看以下链接以获取解决方案

https://jsfiddle.net/1pwmnq3L/

Answer 3

根据我对您在 css3 省略号属性中隐藏文本的问题的评论。请查看以下链接。

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

<div>
  logggggggggggggggggggggggggggggworddddddddddddddd
</div>