英文:
CSS adding extra spaces instead of wrapping correctly
问题
这个div中的文本为什么会在每一行的末尾添加额外的空白，而不是像预期的那样让边框紧密地包裹文本呢？
https://jsfiddle.net/wvuszL5f/
.myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; }
我以为使用 white-space:normal 应该可以解决这个问题，但我也尝试了一些其他值，但没有成功。
英文:
Does anyone know why the text in this div adds all that extra white-space on the ends of each line, instead of having the border wrap "tightly" around the text as expected?
https://jsfiddle.net/wvuszL5f/
.myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; }
I thought white-space:normal would get this working, but I also tried some of its other values. No luck.
答案1
得分: 2
你可以在你的类中添加text-align的CSS，如下所示：
.myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; text-align: justify;}
英文:
You can add text-align css in your class like below:
.myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; text-align: justify;}
答案2
得分: 0
当文本中存在（自动）换行时，该元素将扩展到全宽（在这种情况下，默认为父元素定义的max-width，默认为父元素的100%）。无法避免这种情况。
在左对齐的文本中，这将导致描述的效果，在右对齐的文本中，空白将位于右侧，居中的文本将在两侧留有空间，只有justify将不同，即在单词之间均匀分布空格，但仍然会变成全宽。
英文:
As soon as there are (automatic) linebreaks in the text, the element will expand to full width (in this case the defined max-width, by default 100% of the parent element). There is no way around this.
In a left-aligned text this will cause the described effect, in right-aligned text the white spaces will be at the right, centered will have space on both sides, only justify will be different, i.e. distribute the spaces evenly between the words, but still become full-width.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论