web-dev-qa-db-ja.com

テキストだけでなく、全幅で下線を引く

こんにちは、
現在、付箋のようなHTML/CSSを設定しようとしています。

私が目指しているもののImage

image

すべての行には、その行の文字数に関係なく下線を引く必要があることに注意してください。また、すべての新しい行には完全に下線を引く必要があります。

HTML：

<p>
    <img src="http://trööt.net/img/pin.png" alt="Stecknadel"/>
    <font>Heading</font><br />
    <span class="blockMargin">
    <span class="underline">
        <strong>Subheading</strong> text text text
    </span>
    </span>
</p>

CSS：

p {
    background-Color: #ffc; 
    padding: 1em; 
    width: 40em; 
    box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7); 
    text-align: justify;
}
img{
    float: None;  
    height: 4em; 
    display: block; 
    margin-left: Auto; 
    margin-right: Auto;
}

.blockMargin{
    display: block; 
    margin-bottom: -1px;
}

.underline{
    border-bottom: 1px dotted #c03;
}

これは、私が現在使用しているコードです（stackoverflow.comからすでにアイデアがわかりました）。ただし、完全な行には下線が引かれていませんが、text-decoration: underline...のように機能します。

何か案は？ 多分私はこれをWordPressと核テーマを使用して作成することを追加する必要があります。

ご助力ありがとうございます！

JSFiddleの例： http://jsfiddle.net/8w9Lj7nd/

cssborderunderline
13
trootnet

http://jsfiddle.net/8w9Lj7nd/1/

どうぞ。

.underline{
border-bottom: 1px dotted #c03;
width: 100%;
display: block;
}
7
NubPro

これは答えられます ここ ：

その他の回答 を取得し、SCSSにアップグレードして構成可能にしました。穴とルールのサイズと色を簡単に変更できるようになり、すべてがそれに応じてサイズ変更されます。

また、textareaの代わりに編集可能なdivを使用する別の例を追加しました。

example

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

残念ながら、StackoverflowはSCSSをサポートしていないため、ここに1つの固定構成のスナップショットを含めました。

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  -webkit-background-size: 100% 20px;
  background-size: 100% 20px;
}
<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>
1
Benny Bottema