CODEWITHSUNDEEP
htmlcss
Prisoner ZERO
Prisoner ZERO

Reputation: 14176

Why is my text flowing outside my Paragraph Element?

I have a widget that will display a listing of comments. The intent is...for the element to simply automatically expand to display the comment (text).

However, no matter what I try, either the element (itself) expands beyond the page...or the text flows beyond the bounds of the element(s).

I would like it to:

I've been trying:

But I cant seem to make it work

.commenting-context {
  background-color: #fff;
  border: 1px solid #B9B9B4;
  display: none;
  position: absolute;
  margin-top: 20px;
  min-width: 500px;
  padding: 10px;
  -webkit-box-shadow: 0 0 3px 1px #2e6da4;
  -moz-box-shadow: 0 0 3px 1px #2e6da4;
  box-shadow: 0 0 3px 1px #2e6da4;
}

.commenting-context section header {}

.commenting-context section header h5 {
  color: #B4B4B3;
  margin-top: 0px;
}

.commenting-context section header h5 .topic {
  color: #000;
  font-weight: 700;
}

.commenting-context .comment-gallery {
  display: none;
}

.commenting-context .comment-gallery .comment {
  margin-left: 10px;
}

.commenting-context .comment-gallery .comment:first-child {
  margin-top: 15px;
}

.commenting-context .comment-gallery .comment header {
  padding-bottom: 10px;
}

.commenting-context .comment-gallery .comment header .author {
  margin-right: 5px;
  font-weight: 700;
}

.commenting-context .comment-gallery .comment header .author.system {
  color: #ccc;
}

.commenting-context .comment-gallery .comment header .title {
  margin-right: 5px;
}

.commenting-context .comment-gallery .comment header .datetime {
  color: #B4B4B3;
}

.commenting-context .comment-gallery .comment p {
  font-size: 12px;
  margin-top: 10px;
  padding: 5px;
  inline-size: 400px;
}

.commenting-context .working-status {
  border: 1px solid #E7E2E2;
  border-radius: 5px;
  padding: 10px;
}

.commenting-context .working-status img {
  height: 50px;
}

.commenting-context .working-status p {
  color: #09347a;
  font-size: 20px;
  margin-top: 10px;
}
<!-- Comment Widget -->
<div class="commenting-context" data-context-id="0" data-context-fullname="">

  <!-- Comment Header -->
  <section>
    <header class="clearfix">
      <h5 class="pull-left">Comments&nbsp;for&nbsp;<span class="topic"></span></h5>
    </header>
  </section>

  <!-- Comment Gallery -->
  <section class="comment-gallery"></section>

  <!-- Working Message -->
  <div class="working-status">
    <center>
      <img src="/Content/Images/green-working-spinner.gif" />
      <p>Working</p>
    </center>
  </div>
</div>

<!-- Comment -->
<article class="comment" data-id="0" data-commenting-id="0" data-user-id="0" data-is-system-comment="false">
  <header class="clearfix">
    <span class="datetime"></span>
    <div class="pull-right">
      <span class="author text-right"></span>
      <span class="title text-right"></span>
    </div>
  </header>
  <p></p>
  <hr />
</article>

VISUAL:
enter image description here

Upvotes: 0

Views: 210

Answers (3)

Renerd
Renerd

Reputation: 1

use position property in css

Position:relative;

Upvotes: 0

Chris W.
Chris W.

Reputation: 23280

So, often for UX purposes many third party data tables will apply a white-space: nowrap to a cells contents to apply an ellipsis with a hover tooltip to save on screen real estate in cases with long content strings (or sometimes they'll toggle the table-layout property on the table itself from auto to fixed for other scenarios. Either can effect content strings in various cases.

In this case a definition of white-space: nowrap is apparently applied accompanied by the line-height restriction you identified. So by overriding these properties to allow the wrapping then the cells content will in invoke the default overflow and word-break definitions to allow the user agent rendering it to perform like a paragraph would normally behave.

Glad you got your remedy!

Upvotes: 1

BCT
BCT

Reputation: 313

Use a mix of max-width, and max-content. Type into this snippet to see how it works.

$("input[type='text']").keyup(function () 
{
  $("#msg")[0].innerHTML = $("input[type='text']")[0].value;
});
#limit {
  width: 300px;
  height: 100px;
  border: 2px solid black;
  padding: 2px;
}

#msg 
{
  width: max-content;
  max-width: 98%;
  border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "limit">
  <div id = "msg">
  </div>
</div>
<input type = 'text'>

Upvotes: 1

Related Questions