OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to give spans a height without breaking lines?

  • Thread starter Thread starter Blee
  • Start date Start date
B

Blee

Guest
I am trying to display nested spans, each span with its own height and underlining, so a user can differentiate between the different spans. See this jsfiddle

The example also shows how the "weduwe [..] Bouwensz" span breaks the line within the .pane, which should not happen. I only want the 'ordinary' line breaks on words.

I could comment out these two lines:

Code:
.nested-annotation {
  /* display: inline-block; */
  /* white-space: nowrap;   */

But then all the underlines collapse because the spans lose their margin.

How can I prevent these span-line breaks, without the spans losing their height and the underlines collapsing into a single line?


Code:
.pane {
  width: 40em;
  border: 1px solid black;
}

.nested-annotation {
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 2px;
  border-bottom: 1px solid;
}

.nested-annotation:hover {
  margin-bottom: 1px;
  border-bottom: 2px solid;
}

.underlined-hoe {
  border-bottom-color: #b84040 !important;
}

.underlined-per {
  border-bottom-color: rgb(159, 202, 4) !important;
}

Code:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="pane">Synde ter vergaderinge gelesen de requeste van <span class="annotated-segment"><span class="underlined-hoe nested-annotation">weduwe van wylen den <span class="underlined-per nested-annotation">Capn. Willem Bouwensz</span></span>
    </span> om te hebben betalinge van twee ordonnantien om hare betalinge aldaer te vorderen.</div>
  <script src="index.js"></script>
</body>

</html>
<p>I am trying to display nested spans, each span with its own height and underlining, so a user can differentiate between the different spans.
See this <a href="https://jsfiddle.net/rb4pm06e/" rel="nofollow noreferrer">jsfiddle</a></p>
<p>The example also shows how the "weduwe [..] Bouwensz" span breaks the line within the <code>.pane</code>, which should not happen. I only want the 'ordinary' line breaks on words.</p>
<p>I could comment out these two lines:</p>
<pre class="lang-css prettyprint-override"><code>.nested-annotation {
/* display: inline-block; */
/* white-space: nowrap; */
</code></pre>
<p>But then all the underlines collapse because the spans lose their margin.</p>
<p><em><strong>How can I prevent these span-line breaks, without the spans losing their height and the underlines collapsing into a single line?</strong></em></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.pane {
width: 40em;
border: 1px solid black;
}

.nested-annotation {
display: inline-block;
white-space: nowrap;
margin-bottom: 2px;
border-bottom: 1px solid;
}

.nested-annotation:hover {
margin-bottom: 1px;
border-bottom: 2px solid;
}

.underlined-hoe {
border-bottom-color: #b84040 !important;
}

.underlined-per {
border-bottom-color: rgb(159, 202, 4) !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="pane">Synde ter vergaderinge gelesen de requeste van <span class="annotated-segment"><span class="underlined-hoe nested-annotation">weduwe van wylen den <span class="underlined-per nested-annotation">Capn. Willem Bouwensz</span></span>
</span> om te hebben betalinge van twee ordonnantien om hare betalinge aldaer te vorderen.</div>
<script src="index.js"></script>
</body>

</html></code></pre>
</div>
</div>
</p>
Continue reading...
 
Top