如何在不定义容器div上的宽度或最大宽度的情况下制作跨接换行词？

时间：2018-08-20 14:04:06

标签： html css

我有以下部分生成的简化代码，用于在Dojo对话框中显示警告或错误：

/*Relevant CSS:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
			<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
  </div>
</div>

我希望.l-status-message-wrapper--dialog中的长文本不增加.machineParameterDialogContents div的宽度。

但是，我不想给.machineParameterDialogContents div或任何父div一个width或max-width。我希望容器在带有长文本的组件之后根据最宽的元素调整宽度，该宽度可能会逐页变化，有时甚至对于同一对话框，同一页面在同一页面上也会有所不同，具体取决于执行的操作。需要说明的是：我不想扩大外部.machineParameterDialogContents div，而不是.l-status-message-wrapper--dialog范围。该范围应最大扩展到页面中任何其他组件的大小。而且，在相关情况下，machineParameterDialogContents div中的所有内容都通过Ajax加载。

因此，在上面的示例中，我不希望跨度大于200px，其余部分应自动换行，但是我希望在不跨度或machineParameterDialogContents div上定义最大宽度的情况下这样做。请注意，我给了表单一个固定的宽度，但实际上，该宽度可以在对话框加载之间改变，并且是动态的。

这有可能吗？我需要支持Chrome，Firefox和IE11。

2 个答案:

答案 0 :(得分：0)

您可以使用flex并在右侧添加另一个div。然后将flex-grow设置为：1。如果右div有更多内容，它将占据屏幕的其余部分，否则，左div将伸展。我认为这是最好的方法，而无需定义任何宽度。

/*Relevant CSS:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}

.dijitDialogPaneContent{
  display: flex;
}

.machineParameterDialogContents{
  flex-grow: 1;
}

.more-content{
  flex-grow: 1;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
			<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
    <div class="more-content">
    “Such a little helpless creature will only be in the way,” I said; “you had better pass him up to the Indian boys on the wharf, to be taken home to play with the children. This trip is not likely to be good for toy-dogs. The poor silly thing will be in rain and snow for weeks or months, and will require care like a baby.” But his master assured me that he would be no trouble at all; that he was a perfect wonder of a dog, could endure cold and hunger like a bear, swim like a seal, and was wondrous wise and cunning, etc., making out a list of virtues to show he might be the most interesting member of the party.
    </div>
  </div>
</div>

答案 1 :(得分：0)

经过一番调查，我们的网页设计师找到了一种解决方案，其中涉及在跨度上放置一个flexbox。我正在与其他有此问题的人共享以下解决方案。

/*Relevant CSS:*/

.l-status-message-wrapper {
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
  min-height: 15px;
}

.l-status-message-wrapper--dialog {
  margin-left: 0px;
  display: block;
  word-wrap: break-word;
}

.c-global-message {
  min-height: 15px;
  color: #a5cf42;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.c-global-message--error {
  color: #e31d25;
}

.dijitDialog {
  background: #eee;
  border: 1px solid #d3d3d3;
  -webkit-box-shadow: 0 5px 10px #adadad;
  padding: 0;
}

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.dijitDialogTitleBar {
  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
  vertical-align: middle;
}

.dijitDialogTitleBar {
  background: #fafafa url(images/titleBar.png) repeat-x top left;
  padding: 5px 6px 3px 6px;
  outline: 0;
}

.dijitDialogTitleBar {
  cursor: move;
}

form {
  width: 200px;
  height: 200px;
  background-color: green;
}

/* Limits the width of an element so it does not exceed the width of the largest element 
 * on the same DOM level. It will adjust the width of its contents in cases where the parent
 * element has no width value set. (e.g. A dialog message span that may not exceed the width of a accompagnied c-panel-dialog)
 * 
 * Always use in a hierarchical markup combination (l-dynamic-width-wrapper > l-dynamic-width-wrapper-items)
 */
.l-dynamic-width-wrapper {
	display: flex;	
}

.l-dynamic-width-wrapper > .l-dynamic-width-wrapper-items {
	  flex-grow: 1;
	  width: 0;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
			<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
    </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
    <div id="machineParameterDialogContents" class="machineParameterDialogContents">
      <div class="l-dynamic-width-wrapper">
       <div class="l-dynamic-width-wrapper-items">
       <span class="l-status-message-wrapper l-status-message-wrapper--dialog">
        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
          error: <span>Action not successful. Please correct the validation errors</span>
        </span>
      </span>
      </div>
      </div>
      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">

      </form>
    </div>
  </div>
</div>

相关问题
最新问题