New issue
Advanced search Search tips

Issue 797773 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 720205
Owner: ----
Closed: Jan 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Bug



Sign in to add a comment

"word-break: break-all" css doesn't work for slashes, backslashes, dots etc. and causes text overlapping

Reported by andriy.p...@gmail.com, Dec 27 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Example URL:
http://jsfiddle.net/brucecat5/oxw2cpv8/

Steps to reproduce the problem:
1. Create html page with markup:
<table>
	<tbody>
		<tr>
			<td>	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			</td>
			<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</td>
		</tr>
  </tbody>
</table>

and CSS:

table {
    table-layout: fixed;
    width: 100%;
}
td {
    width: 50%;
    word-break: break-all;
    border: 1px solid rgb(192, 192, 192);
}

Or you can just open http://jsfiddle.net/brucecat5/oxw2cpv8/

2. Observe results

Try different characters, such as "/", "\", "." etc..
Works ok in IE and Firefox.

What is the expected behavior?
If all slashes do not fit into 1 line they need to be moved to the next line.

What went wrong?
If all slashes do not fit into 1 line they overlap with another text.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.84  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
 

Comment 1 by bokan@chromium.org, Dec 27 2017

Components: -Blink Blink>Layout>Table
Status: Untriaged (was: Unconfirmed)
Confirmed this works in Firefox but not Chrome.
Cc: dgro...@chromium.org kojii@chromium.org
Components: -Blink>Layout>Table Blink>Layout
Labels: -Pri-2 Pri-3
Looks like tables don't influence it? +kojii for triage

http://jsfiddle.net/dgrogan/c1evL9sn/

div {
  width: 200px;
  word-break: break-all;
  border: 1px solid lime;
}

<div>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Comment 3 by kojii@chromium.org, Jan 2 2018

Mergedinto: 720205
Status: Duplicate (was: Untriaged)
This is by design, please see issue 720205.

Sign in to add a comment