HTML 中所选内容的右缩进

Question

遇到这个问题，在Chrome和Mozilla中选中的文本右侧有一个缩进。 Safari 没有。

检查了其他网站，这似乎是浏览器的默认行为。

有人知道如何摆脱它吗？

沙盒示例：https://codepen.io/Steep1692/pen/Yzxvgdz

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto natus modi saepe dolore nihil earum nostrum vero molestias nesciunt minima quis culpa, dolores excepturi error nemo! Impedit, beatae enim!</div>

div { width: 200px; border: 1px solid green; }

图片示例如下：

问题出在不同的侧面缩进上。他们惹恼了客户。

Answer 1

您始终可以使用 text-align justify，但这当然有其自身的特点和问题。

div {
  width: 200px;
  border: 1px solid green; 
  text-align: justify;  
  text-align-last: left;
  overflow: hidden  /* if you dont want it to overlap the boundaries */
}

我认为我从未见过如此简单的堆栈溢出代码 fiddle，哈哈。如果您可以将问题减少到这个小标记，我会认为您的客户只是对 HTML 一般呈现文本的方式不满意。 :P

Answer 2

使用overflow:hidden

The overflow property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

div {
  width: 200px;
  border: 1px solid green; 
  text-align: justify;  
  text-align-last: left;
  overflow:hidden;
}

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto natus modi saepe dolore nihil earum nostrum vero molestias nesciunt minima quis culpa, dolores excepturi error nemo! Impedit, beatae enim!</div>

HTML 中所选内容的右缩进

Right indent of the selection in HTML

html

css

selection

textselection