How to make span wrap words without defining a width or max-width on the container div?

Question

I have the following partially generated generated and simplified code which is used to display warnings or errors in Dojo dialogs:

/*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>

I'd like long text in .l-status-message-wrapper--dialog to not increase the width of the .machineParameterDialogContents div.

However, I'd rather not give the .machineParameterDialogContents div or any of the parent divs a width or max-width. I want the container to adjust the width based on the widest element AFTER the component with long text, which can vary on a page by page basis and sometimes even be different on the same page for the same dialog depending on what action is being performed. To clarify: It's the outside .machineParameterDialogContents div I don't want to widen, not the .l-status-message-wrapper--dialog span. That span should widen to at most the size of any other components in the page. Also, everything inside the machineParameterDialogContents div is loaded through Ajax, in case it's relevant.

So in the above example, I don't want the span to be more than 200px, and the rest should automatically wrap, but I want this without defining a max-width on the span or the machineParameterDialogContents div. Note that I have given the form a fixed width, but in reality this width can change between dialog loads and is pretty dynamic.

Is this at all possible? I need to support Chrome, Firefox and IE11.

Answer 1

The simplest add to what you already had is to just add

max-width: fit-content to .l-status-message-wrapper--dialog

and it makes the text fit the available width and doesn't add to the overall width

/*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;
  max-width: fit-content;
}

.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>

Answer 2

After some investigating, our webdesigner has found a solution involving putting a flexbox around the span. I'm sharing the solution below for anyone else with this problem.

/*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>

Answer 3

You can use flex and add another div on the right. Then set flex-grow: 1 for both. If the right div have more content it will take the rest of the screen, if not, the left div will stretch. I think it's the best you can do without defining any width.

/*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>