Html Question posted in
Some basic documentation can be found here.

Html – Keeping inline-div on same line as text

I have a small icon on at the end of a short paragraph of text, which may wrap over multiple lines depending on the viewport size. It’s important to me that this icon not occupy an empty line by itself, but rather carry the last word of the paragraph with it. Is there any way to ensure this with pure css?

I considered dynamically grouping the last word of the paragraph with the icon in an inline block. I would prefer to not have to use javascript though, if possible.

This jsfiddle displays the undesired behavior.

    <div class="resizable">
    <span>Lorem ipsum dolor sit amet</span>
    <div class="inlineblock"> </div>
    </div>

    .resizable {
      border: 1px solid black;
      resize: both;
      overflow: hidden;
      width: 11.5rem;
    }

    .inlineblock {
      width: 10px;
      height: 10px;
      background-color: blue;
      display: inline-block;
    }
Tags:

3

Answers


  1. 0

    You could use ::after to place the block

    .resizable {
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  width: 11.5rem;
}

.content {
  display: inline-block;
  padding-right: 10px;
  margin-right: 3px;
}

.content::after {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: -10px;
  position: relative;
  left: 3px;
  background-color: blue;
  display: inline-block;
}
    <div class="resizable">
<span class="content">Lorem ipsum dolor sit amet</span>
</div>
    Login or Signup to reply.
  2. 0

    Change the html a bit by wrapping .inlineblock and the last word in <span> which will have white-space: nowrap;:

    .resizable {
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  width: 11.5rem;
}

.nowrap{
  white-space: nowrap;
}

.inlineblock {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
}
    <div class="resizable">
  <span>
    Lorem ipsum dolor sit
    <span class="nowrap">amet <span class="inlineblock"></span></span>
  </span>
</div>
    Login or Signup to reply.
  3. 0

    As you have mentioned in a comment that the block should be clickable and trigger an event so I have written the following code for you. Here I have used anchor tag on purpose. But you can use a span as well.

    function showMe() {
  document.getElementById("hidden-item").style.display="block";
}
    .resizable {
  border: 1px solid black;
  resize: both;
  overflow: hidden;
  width: 11.5rem;
  font-size: 18px;
  line-height: 20px;
}
.inlineblock {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue;
  text-decoration: none;
  vertical-align: middle;
}
#hidden-item {
  display: none;
}
    <div class="resizable">
  <span>Lorem ipsum dolor sit amet <a class="inlineblock" href="javascript:void(0)" onclick="showMe()"></a></span>
</div>
<div id="hidden-item">Hello World!</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search