溢出文本向左而不是向右

Question

我正在表单字段下方显示电子邮件地址。我需要地址左边与表单字段对齐。但是，当地址很长时，我希望地址向左溢出，而不是流过表单字段的末尾，基本上与字段正确对齐。

可以提供样本图像。

Answer 1

你可以尝试：

mySelector
{
    word-wrap: break-word;
}

这告诉您选择的元素在击中元素的一侧时将其分解。但不确定浏览器支持。

Answer 2

您正在寻找的是CSS word-wrap property。

自动换行允许您强制将长（不间断）文本换行到新行。它通常用于防止长URL溢出狭窄的内容区域（例如网站上的侧边栏或博客评论中）。

例如，您可以使用它来防止文本扩展到区域之外并可能破坏布局：

要使用word-wrap，请指定word-wrap: normal或word-wrap: break-word。

.email-address {
    word-wrap: break-word;
}

正常表示文本将超出其父级的边界。 Break-word 表示文本将换行到下一行。

根据您的情况，这里有一个jsFiddle，其中包含了如何实现您的想法的基本示例。

要使电子邮件地址根据其长度左对齐或右对齐，您需要使用一些JavaScript。

尽管如此，IE 5.5 +，Firefox 3.5 +，Chrome 1.0 +，Safari 1.0 +，Opera 10.5 +都支持自动换行。

Answer 3

阐述Kyle的答案，如果你把你的电子邮件地址文本放到块元素中，给它一个与输入元素相等的固定宽度，然后设置word-wrap:break-word;它就会工作。这是CSS3，但它可以追溯到IE5。 HTML：

<input type="text">
<span class="email">
  thisisareallylongemailthatwillprobablyoverflow@myreallylonginternetserviceprovider.superlongandimpossibletopleveldomain
</span>

CSS：

input {
    width:150px;   
}
span.email {
    width:150px;
      word-wrap:break-word;
}

Example