How can I control how much text a double-click selects?

Question

I want to be able to select a "code" by double-clicking it. But when I do so, the whole definition is selected.

dt {
  float: left;
  clear: left; 
}
dd {
  float: left;
  font-family: monospace;
}

<dl>
  <dt>Code</dt>
  <dd>123456</dd>
  <dt>Code</dt>
  <dd>abcdef</dd>
</dl>

What can I do so that a double-click will select the contents of the dd only?

Related - http://stackoverflow.com/questions/25198831/text-selection-on-double-click-in-html-with-a-float — Paulie_D, Apr 11 '16 at 09:28
Also - http://stackoverflow.com/questions/2876424/html-double-click-selection-oddity — Paulie_D, Apr 11 '16 at 09:29
Double clicking already selects only the dd contents. Voting to close as no repro — TylerH, Jun 14 '22 at 20:26

score 7 · Accepted Answer · answered Apr 11 '16 at 09:17

7

This is a Chrome issue so to solve it you will need to add space before you close the html tag. So you have to do it like this.

<dl>
  <dt> Code </dt>
  <dd> 123456 </dd>
  <dt> Code </dt>
  <dd> abcdef </dd>
</dl>

answered Apr 11 '16 at 09:17

E.Agolli

552
2
11

No i dont but it happened to me before and i remember that i read something that it was chrome issue but now i see it happens in all browsers. Anyway the solution i gave solves it. – E.Agolli Apr 11 '16 at 09:23
Oh, I upvoted as it works and it's lightweight but I'd hoped for a reason...ah well. – Paulie_D Apr 11 '16 at 09:24
What i read also was the float causing it if it helps you. But i dont know why in details. – E.Agolli Apr 11 '16 at 09:27
I like this because it was the easiest and fastest to implement in our case. – Oliver Salzburg Apr 11 '16 at 09:39
1

Thank you and im glad that it solved your problem :) – E.Agolli Apr 11 '16 at 09:41
1

@E.Agolli It's not a bug, when you double click, the un-break content at your cusor will be selected. At an space is a trix :) anyway, it's usefull. – cuong hoang Apr 11 '16 at 09:43

score 2 · Answer 2 · answered Apr 11 '16 at 09:18

2

Use a table instead of a styled description list that looks like a table

<table>
  <tr>
    <td>Code</td>
    <td>123456</td>  
  </tr>
  <tr>
    <td>Code</td>
    <td>abcdef</td>  
  </tr>
</table>

answered Apr 11 '16 at 09:18

dnaranjo

3,647
3
27
41

A definition list is a semantically appropriate structure in many cases—notably in the case of 1:1 title/definitions. Tables are for tabular data, so this “solution” is not really helpful. – fantasticrice Jul 13 '18 at 15:58

score 2 · Answer 3 · answered Apr 11 '16 at 09:22

2

You float left all your element, I thinks it make confusing for double click action known what element is selected. Remove "float:left" attribute on your <dd> element. float and clear

dt {
  float: left;
  clear: left; 
  margin-right: 10px;
}
dd {
  font-family: monospace;
}

<dl>
  <dt>Code</dt>
  <dd>123456</dd>
  <dt>Code</dt>
  <dd>abcdef</dd>
</dl>

answered Apr 11 '16 at 09:22

cuong hoang

94
5

This could be also a solution since floating is causing it. – E.Agolli Apr 11 '16 at 09:28
In general, I'm always in favor of less floating. But when I remove the `float` from the `dd`, it breaks our layout :( – Oliver Salzburg Apr 11 '16 at 09:32
Your layout is break because you set special font for your `
` element. You must spend a lot of time to make up them :)
– cuong hoang Apr 11 '16 at 09:37

score -1 · Answer 4 · answered Jun 14 '22 at 19:56

-1

Don't need to modify the html. You can use css:

dl dd::before { content: '.'; display: block; height: 0; width: 0; visibility: hidden; }
dl dd::after { content: '.'; display: block; height: 0; width: 0; visibility: hidden; }
dl dt::before { content: '.'; display: block; height: 0; width: 0; visibility: hidden; }
dl dt::after { content: '.'; display: block; height: 0; width: 0; visibility: hidden; }

answered Jun 14 '22 at 19:56

Tifu

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 15 '22 at 16:29

How can I control how much text a double-click selects?

4 Answers4