Text does not wrap correctly when placed between elements with the property white-space: nowrap

When applying the white-space: nowrap property to all children of an element, an issue arises in Webkit (and blink) where white space doesn't break between elements as expected:

View example on jsFiddle

.pairs {
    width: 180px;
    overflow: hidden;
}
.pairs > span {
    white-space: nowrap;
}

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    ...
</div>

The CSS is intended to keep word pairs together but allow text to break between <span> elements. This behavior functions correctly in IE and FireFox.

In Webkit browsers (safari, chrome, opera), however, rather than moving a too-long span to the next line, the span gets clipped instead.

This seems to be a bug in webkit (and blink). Is there any workaround available for this issue?

cssgoogle-chromewebkitblink

Answer №1

Recently, Chrome has resolved the rendering bug issue in version 42, so there is no need for any workarounds anymore.

Nothing important to note here, please continue.

If you did encounter this bug before, here are three alternative solutions:

CSS Fix

To fix the wrapping issue and eliminate whitespace between spans, use float: left with a margin-right:

.pairs > span {
    white-space: nowrap;
    float: left;
    margin-right: 0.5em;
}

View example on jsfiddle

HTML Workaround

Add a zero-width space (U+200b) between each <span>:

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    &#x200b;
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    &#x200b;
    <span>
        <strong>banana:</strong>
        <em>peel</em>
    </span>
    ...
</div>

View example on jsfiddle

Improved HTML Solution

Simplify by placing all span elements on the same line in the HTML code:

<div class="pairs">
    <span><strong>bread:</strong> <em>crust</em></span>
    <span><strong>watermelon:</strong> <em>rind</em></span>
    <span><strong>banana:</strong> <em>peel</em></span>
    ...
</div>

View example on jsfiddle

Answer №2

Give this a shot:

.duos {
width: 180px;
overflow: hidden;
}
.duos > span {
display:block;
}

Answer №3

One way to improve the layout is by applying the CSS property display: inline-block; to adjacent span elements:

<span style='display: inline-block;'>

Answer №4

To achieve the desired effect, simply eliminate the white-space property and utilize word-wrap instead.

Here is the CSS code that will make it work:

.pairs {
width: 180px;
overflow: hidden;
}

.pairs > span {
word-wrap:break-word;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

Shifting image from center to corner as you scroll

Hello there, I'm new to this so please bear with me for any obvious mistakes, thank you :) My goal is to have an image move from the center of the screen to the corner of the screen as you start scrolling. I've made some progress on this, but I& ...

javascripthtmlcss

What could be causing the issue with setting the right margin (element.style.marginRight = xxx) not working?

I used JavaScript to set the margin-right of a div when the window is resized. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device- ...

javascripthtmlcssbootstrap-5

Challenges arise when media queries fail to activate properly

Greetings! I am currently working on enhancing the responsiveness of my webpage using Media Queries. However, I seem to be facing a challenge with the second image not changing as expected when I reduce the browser size. In the HTML, 'top-background- ...

htmlcssreactjsmedia-queries

The art of arranging elements on a webpage using HTML and

I designed a rectangle using position: relative; and placed an icon inside it. However, when I added a new div class called .Home, and included an element <h4>Home</h4> with position: relative;, the element appeared outside of the rectangle. Wh ...

htmlcss

Struggling to line up three images with linked attachments in a single row using Bootstrap 4

Currently tackling my portfolio for a school project, I find myself stuck on organizing my projects in a single line. Here is the code snippet that's giving me trouble... <div class="container"> <div class="row"> <div class= ...

htmlcssbootstrap-4

Is it possible to load images top to bottom?

Is there a way to make browsers load images from the bottom to the top? Imagine I have an extremely long image that takes 60 seconds to load. The content is designed to be read from bottom to top. Is there any trick I can use to ensure that the image load ...

javascripthtmlcssbrowserimage-loading

Are CSS3 animations limited to working only with Webkit?

Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate you ...

firefoxgoogle-chromecssanimationwebkit

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

javascripthtmlcsscanvas

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

Understanding the purpose of the notched property in Material-UI

I am currently integrating Material-UI into a project and exploring their API. One thing that I find confusing is the notched property within the OutlineInput Component. <FormControl variant='outlined'> <OutlinedInput notched={false} ...

htmlcssreactjsmaterial-ui

Placing a div on top of a link renders the link unusable

I am facing a situation and require assistance (related to HTML/CSS/JS) I currently have a div containing an image (occupying the entire div space) such that when hovered over, another div with an image is displayed on top (the second div is semi-transpar ...

javascriptjqueryhtmlcss

Seeking a precise placement, must find a CSS-only answer

After spending two days experimenting with different CSS styles like absolute positioning, inline/inline-block display, and flex display, I have yet to find a solution for styling a timestamp's label position using pure CSS. https://i.stack.imgur.com ...

htmlcsspositioncss-positionpure-css

The white background of the div conceals the shadow of the Bootstrap navbar

I am using Bootstrap's navbar with .shadow-sm. I have two divs beneath it, one without background and the other one with a white background. The shadow appears as expected in the div with no background specified, but it is being obscured by the white ...

htmlcsslaravelbootstrap-4

Updating the UpdatePanel causes duplication of CssClass

In my ASP.NET Webforms project, I have created a user control that inherits from the LinkButton. This user control has a property to adjust the size by adding predefined CSS classes to the control. Protected Overrides Sub CreateChildControls() Dim Siz ...

.netasp.netupdatepanelduplicatescss

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user. Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the ...

javascriptcssreactjsdrag-and-drop

Transforming Text On Hover Using CSS, as well as Customizing the Style

I've been struggling with this issue for quite some time now. Despite scouring the first page of Google search results for "css change text on hover," I have not been able to find a solution. Inside a div, I have text that is styled and positioned us ...

htmlcss

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3